16

有没有更好的方法来使用角度 js 改变元素高度？

我这样做是这样的：

function HomeCtrl ($scope) {
    $('.banner').css('height', ($(window).height()) - $('.header').outerHeight());
}
4

2 回答 2

35

一起避免使用 jQuery。使用指令，您可以访问元素并对其进行调整。作为一般的经验法则，如果你引入了 jQuery 来帮助你进行 DOM 操作，那么你很可能做错了 Angular。如果没有大量上下文，很难提出比您在此处拥有的更好的实现。

这在某种程度上取决于什么（以及在哪里）.header，但这是我的想法：

脚本：

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>

由于我不确定标头是什么，我只是假设它作为属性传入。我最好的猜测是获取它的高度并将其存储在控制器范围内，然后由横幅观看。这也会使它有些响应。

于 2013-09-18T20:10:32.237 回答
26

不要在控制器中进行 DOM 操作。而是在指令中执行：

angular.module('myApp', []).directive('banner', function() {
    return function (scope, element, attrs) {
        element.height($(window).height() - $('.header').outerHeight());
    }
});

在模板中：

<div banner>foo bar</div>
于 2013-09-18T19:46:01.233 回答