使用Angular JS更改元素高度
使用Angular JS更改元素高度
提问于 2013-09-19 03:31:41
有没有更好的方法来使用angular js改变元素的高度？
我是这样做的：
function HomeCtrl ($scope) {
$('.banner').css('height', ($(window).height()) - $('.header').outerHeight());
}回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-19 04:10:32
一起避免使用jQuery。使用指令，您可以访问元素并对其进行调整。通常的经验法则是，如果您引入了jQuery来帮助您进行DOM操作，那么您很可能做错了Angular。如果没有大量的上下文，很难提出比这里更好的实现方案。
这在一定程度上取决于.header是什么(以及在哪里)，但我的想法是：
jscript：
var myApp = angular.module('myApp', []);
myApp.directive('banner', function ($window) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var winHeight = $window.innerHeight;
var headerHeight = attrs.banner ? attrs.banner : 0;
elem.css('height', winHeight - headerHeight + 'px');
}
};
});html：
<div banner="250" class="banner">I'm a banner!</div>因为我不确定头是什么，所以我只是假设它被作为一个属性传入。我最好的猜测是获取它的高度并将其存储在控制器作用域中，然后由banner监视。这也会使其具有一定的响应性。
Stack Overflow用户
发布于 2013-09-19 03:46:01
不要在控制器中进行DOM操作。在指令中完成，而不是：
angular.module('myApp', []).directive('banner', function() {
return function (scope, element, attrs) {
element.height($(window).height() - $('.header').outerHeight());
}
});在模板中：
<div banner>foo bar</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18880735
复制相关文章
相似问题
腾讯云开发者
