CODEWITHSUNDEEP
javascriptcssangularjs
Kalamarico
Kalamarico

Reputation: 5666

Angular ngClass not apply in link function

I have a simple directive who render an element, this is the template:

<div class="nav-item"></div>

.nav-item class:

.nav-item {
  height: 50;
}

The directive:

    angular.module('myapp')
.directive('navItem', ['info',
  function(info) {
    return {
      scope: {
        position: '@'
      },
      link: function(scope, element) {
        function _addData() {
          var rect = element.get(0).getBoundingClientRect();
          info.addData(scope.position, rect);
        }

        _addData();
      },
      templateUrl: 'tmpl.html'
    };
  }]
);

When the link function call to _addData method, i get the position of rendered element and register in a custom factory, this is working good, rect object has top, bottom, height... all the correct rendered attributes. But the problem comes when i change in the template class attribute by ngClass, if i do this in tmpl:

<div data-ng-class="{'nav-item': true}"></div>

when _addData call to getBoundingClientRect, the height that it's returning is 1 instead of 50, i think that when link function is processed ngClass is not apply to the element, do you think i'm right? how can i "wait" to get correct position element? Also i included in directive the postLink function to check the same and not working...

Upvotes: 0

Views: 730

Answers (1)

Kalamarico
Kalamarico

Reputation: 5666

Well... i solved the problem, before explain i have to tell that i have reading about priority and terminal directive attributes. My problem was that ngClass didn't execute before my link function, ngClass uses $watch in attribute so digest process executes ngclass in last order. So to solve my problem simply i use addClass in link function instead of use ngClass:

tmpl:

<div></div>

directive:

angular.module('myapp')
.directive('navItem', ['info',
  function(info) {
    return {
      scope: {
        position: '@'
      },
      link: function(scope, element) {
        function _addData() {
          var rect = element.get(0).getBoundingClientRect();
          info.addData(scope.position, rect);
        }
        element.children().eq(0).addClass('nav-item');
        _addData();
      },
      templateUrl: 'tmpl.html'
    };
  }]
);

Upvotes: 1

Related Questions