Изменить высоту элемента угловойJS

Question

У меня есть этот код ниже, что я думал, будет работать. но это не

'use strict'; 

angular.module('remnantApp') 
    .directive('bigDiv', function ($timeout) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     template: '<div style="height: {{height}}, background-color: black;">Hello</div>', 
     link: function(scope, element, attrs) { 
     scope.height = angular.element(window).height(); 
     } 
    }; 
    }); 

Пожалуйста, помогите

Answer 1

templateUrl должны быть template как вы используете шаблон рядный, также стиль Dynamica можно оказывать с помощью ng-style то шаблон становится как ng-style="{height: height + \'px\' }"

Markup

<big-div><big-div> 

Код

angular.module('remnantApp',[]) 
    .directive('bigDiv', function ($timeout,$window) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     template: '<div class="big-div" ng-style="{height: height + \'px\' }" style="background-color: black;">Hello</div>', 
     link: function(scope, element, attrs) { 
     scope.height = $window.innerHeight; //without jQuery 
     //other alternative would be 
     //element.find('.big-div').css(height, scope.height); 
     } 
    }; 
}); 

Working Plunkr

Answer 2

Я хотел бы попробовать использовать ng-style при использовании динамического стиля атрибуты:

'use strict'; 

angular.module('remnantApp') 
    .directive('bigDiv', function ($timeout) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     template: '<div ng-style="styles">Hello</div>', 
     link: function(scope, element, attrs) { 
     scope.styles = { 
      height: angular.element(window).height(), 
      'background-color': 'black' 
     }; 
     } 
    }; 
    });