使用Angular JS更改元素高度

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>