I have this code below, that I thought will work. but it doesn't
'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
templateUrl should be template as you are using inline template, Also the dynamica style could be render using ng-style then template becomes like ng-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);
}
};
});
I would try 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'
};
}
};
});
