Изменение высоты элемента с помощью Angular JS

Ответ 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>

Так как я не уверен, что такое заголовок, я просто предполагаю, что он передается как атрибут. Мое лучшее предположение - это захватить его высоту и сохранить ее в области контроллера, которая затем просматривается баннером. Это также сделало бы его несколько отзывчивым.

Ответ 2

Не выполняйте манипуляции с DOM в контроллерах. Сделайте это в директивах istead:

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

И в шаблоне:

<div banner>foo bar</div>