角度維護指令列表

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