3

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

3
  • You thought will work. but it doesn't ? Ok. Say that. But put more explainations please. What is currently not working ? Have you got some error thrown ? Help us to help you.. Commented Aug 1, 2015 at 14:35
  • sorry, yeah. I didn't get any error at all. However, I thought that the div element height will change as that directive loads. but it didn't. Commented Aug 1, 2015 at 14:37
  • Ok, so. Please put your HTML complete markup. Commented Aug 1, 2015 at 14:43

2 Answers 2

3

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);
      }
    };
});

Working Plunkr

Sign up to request clarification or add additional context in comments.

4 Comments

sorry, yeah i fixed that. it still doesn't work. it wasn't the original problem
@ChristianSakai then could you explain what is the problem?
sorry. yeah. I tried to change the element height using scope, but it didn't change.
@ChristianSakai look at the other alterative which I updated in code..Glad to help you..Thanks :)
2

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'
        };
      }
    };
  });

1 Comment

yeah this one works too. I didn't know that there is a ng-style in angular. Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.