Question

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

我这样做：

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

Answer 1

一起避免使用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>

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

Answer 2

不要在控制器中进行DOM操作。在指令中这样做：

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

在模板中：

<div banner>foo bar</div>

使用Angular JS更改元素高度

2 个答案: