角度维护指令列表

Question

我想按它们在dom中出现的顺序在页面上维护指令列表。 我知道指令是按顺序创建的（称为链接函数），可以在链接时将它们附加到数组中，但是如何处理动态页面（ajax，ngRepeats等）。 当前，每次需要使用数组时，我都会广播事件以按顺序获取指令。

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

但是我宁愿让指令在创建和删除时进行注册和注销，以提高效率。 类似于在AngularJS指令上讨论的内容-设置多个指令元素的顺序（不是指令的优先级，而是元素的优先级） ，但是可以处理动态添加/删除的指令。 如何在不每次都收集指令的情况下完成此操作？

Answer 1

“我想按照页面在dom中出现的顺序维护页面上的指令列表。”

这些方法可以帮助您吗？

优先

AngularJS查找与元素关联的所有指令并对其进行处理。 此选项告诉角度排序指令按优先级排序，因此优先级较高的指令将先于其他指令被编译/链接。 使用此选项的原因是我们可以对编译后的前一条指令的输出执行条件检查。 在下面的示例中，仅当div上具有btn类时，我才想添加btn-primary类。

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

请注意，默认优先级（如果未设置）将为零。 在此示例中，btn指令将在primary之前执行。 玩演示！

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

终奌站

根据官方文档，如果设置为true，则当前优先级将是将在元素上执行的最后一组指令。 除非您将自定义指令与设置了优先级的内置指令（例如ngRepeat，ngSwitch等）结合使用，否则它是正确的。在这种情况下，将不会执行优先级大于或等于当前优先级的所有自定义指令。 在下面的示例中，第一个具有比第二个更高的优先级–第二个将终端设置为true。 而且，如果将较低的优先级设置为“第一”，则将完全不执行该优先级。 但是在不进入指令的情况下，即使它的优先级高于ng-repeat，也不会执行。 是虫子吗？ 是因为ng-repeat中使用了包含法吗？ 需要挖掘...

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