角度维护指令列表

Question

I want to maintain a list of directives on a page in the order they appear in the dom. I know directives are created (link function called) in order, and I can append them to an array when being linked, but how do I handle dynamic pages (ajax, ngRepeats, etc..). Currently every time I need to use the array I broadcast an event to get the directives in order.

gatherDirectives: ->
  all = []
  $rootScope.$broadcast 'roleCall', (dir) -> all.push dir
  all

But I'd rather have directives register and unregister when being created and removed to be more efficient. Something like what is discussed on AngularJS directive - setting order for multiple directive elements (not priority for directives, but priority for the elements) , but that can handle dynamically added/removed directives. How can this be done without gathering the directives each time?

Answer 1

"I want to maintain a list of directives on a page in the order they appear in the dom."

Can these methods help you?

Priority

AngularJS finds all directives associated with an element and processes it. This option tells angular to sort directives by priority so a directive having higher priority will be compiled/linked before others. The reason for having this option is that we can perform conditional check on the output of the previous directive compiled. In the below example, I want to add btn-primary class only if a div has btn class on it.

<div style='padding:100px;'>
  <div primary btn>Random text</div>
</div>

Please note that the default priority if not set will be zero. In this example, btn directive will be executed before primary. Play with the demo!

App.directive('btn', function($timeout) {
  return {
    restrict: 'A',
    priority: 1,
    link: function(scope, element, attrs) {
      element.addClass('btn');
    }
  };
});

App.directive('primary', function($http) {
  return {
    restrict: 'A',
    priority: 0,
    link: function(scope, element, attrs) {
      if (element.hasClass('btn')) {
        element.addClass('btn-primary');
      }
    }
  };
});

Terminal

As per the official documentation, If set to true then the current priority will be the last set of directives which will execute on an element. It holds true unless you use custom directives in conjunction with built-in directives having priority set on them such as ngRepeat, ngSwitch, etc. Instead all custom directives having a priority greater than or equal the current priority will not be executed in this case. In the below example, first has a higher priority than second – which has terminal set to true. And if you set the lower priority to first – It will not be executed at all. But in case of no-entry directive, it will not be executed even though it has a higher priority than ng-repeat. Is it a bug? Is it because of transclusion used in ng-repeat? Need to dig in…

<div first second></div>

<ul>
    <li ng-repeat="item in ['one', 'two', 'three']" no-entry>{{item}} </li>
</ul>



App.directive('first', function() {
  return {
    restrict: 'A',
    priority: 3,
    link: function(scope, element, attrs) {
      element.addClass('btn btn-success').append('First: Executed, ');
    }        
  };
});

App.directive('second', function() {
  return {
    restrict: 'A',
    priority: 2,
    terminal: true,
    link: function(scope, element, attrs) {
      element.addClass('btn btn-success').append('Second: Executed ');
    }        
  };
});

App.directive('noEntry', function() {
  return {
    restrict: 'A',
    priority: 1001,
    link: function(scope, element, attrs) {
      element.append('No Entry: Executed ');
    }        
  };
});