Question

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

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

但我宁愿在创建和删除指令时注册和取消注册以提高效率。像AngularJS directive - setting order for multiple directive elements (not priority for directives, but priority for the elements)上讨论的那样，但可以处理动态添加/删除的指令。如果不每次都收集指令，怎么办呢？

Answer 1

“我希望按照它们在dom中显示的顺序维护页面上的指令列表。”

这些方法可以帮到你吗？

<强>优先级

AngularJS查找与元素关联的所有指令并对其进行处理。此选项告诉angular按优先级对指令进行排序，以便在其他指令之前编译/链接具有更高优先级的指令。拥有此选项的原因是我们可以对编译的上一个指令的输出执行条件检查。在下面的示例中，我只想在div上有btn-primary类时添加btn类。

<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等）结合使用，否则它将成立。在这种情况下，将不会执行优先级大于或等于当前优先级的所有自定义指令。在下面的示例中，first的优先级高于second，其终端设置为true。如果您将较低优先级设置为第一个 - 它将不会被执行。但是在no-entry指令的情况下，即使它具有比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 ');
    }        
  };
});

Angular维护指令清单

1 个答案: