Why does the angular expression in the directive template execute twice?

Question

Its a simple directive:

app.directive('ngFoo', function($parse){

  var controller = ['$scope', function ngNestCtrl($scope) {

    $scope.getCanShow = function() {
      console.log('show');
      return true;
    };

  }];

  var fnPostLink = function(scope, element, attrs) {
    console.log('postlink');
  };

  var fnPreLink = function(scope, element, attrs) {
    console.log('prelink');
  };

  var api = {
    template: '<div ng-if="getCanShow()">foo</div>',
    link: {
      post: fnPostLink,
      pre: fnPreLink
    },
    restrict: 'E',
    controller:controller
  };

  return api;

});

My goal was to find when "show" gets output to console. At this moment I figure it happens after linking (pre & post).

This makes sense. Since the template is rendered after those phases. (Correct me if I am wrong).

But then again, why would the template be rendered twice?

http://plnkr.co/edit/JNhON2lY9El00dzdL39J?p=preview

you can refer http://stackoverflow.com/questions/20417407/why-ng-class-is-called-several-times-in-directive-of-angular — Arun AK, Sep 23 '15 at 13:58

score 1 · Accepted Answer · answered Sep 23 '15 at 14:01

1

Angular has multiple digest cycles and you're seeing two of them. This is totally normal and perfectly ok.

answered Sep 23 '15 at 14:01

Mathew Berg

28,625
11
69
90

Why does the angular expression in the directive template execute twice?

1 Answers1