Change height of angularJS element
I have this code below which I thought would work. but he is not
'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();
}
};
});
Please, help
+3
source to share
2 answers
templateUrl
should be template
as you are using inline template. Also dynamica style can be rendered with ng-style
, then the template becomes likeng-style="{height: height + \'px\' }"
Markup
<big-div><big-div>
code
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);
}
};
});
+3
source to share
I am trying to use ng-style
when using dynamic style attributes:
'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'
};
}
};
});
+2
source to share