AngularJS指令用於訪問子級的ng-repeat範圍

好吧，讓我開始說我有一個指令，該指令創建一個JQueryUI選項卡設置，其中包含基本填充選項卡名稱和選項卡內容的支持字段。AngularJS指令用於訪問子級的ng-repeat範圍

<div id="summaryTabPanel"> 
    <ul> 
     <li ng-repeat="category in SummaryCategories"> 
      <a href="#tabs-{{$index + 1}}">{{category.Name}}</a> 
     </li> 
    </ul> 

    <div ng-repeat="category in SummaryCategories" id="tabs-{{$index + 1}}"> 
     {{category.Content}} 
    </div> 
</div>

因此，大家可以看到，我有一個<ul>與在<li>的NG-重複。

因爲我會將JQueryUI選項卡函數應用於父容器id="summaryTabPanel"，所以我需要等到所有dom都呈現完畢。

所以我做了一些研究，並找出我需要創建一個指令那種看起來像以下：

Application.Directives.directive("repeatDone", function() { 
    return { 
     restrict: "A", 
     link: function (scope, element, attrs) { 
      scope.$watch("repeatDone", function() { 
       if (scope.$last) { 
        $("#summaryTabPanel").tabs({ 
         event: "mouseover" 
        }); 
       } 
       ; 
      }); 
     } 
    }; 
});

這手錶，看看最後的重複項目被發現，然後應用DOM通過聲明更改$("#summaryTabPanel").tabs()

這樣很好，但它只適用於將指令應用於summaryTabPanel容器的最後一個重複子項。

<div id="summaryTabPanel"> 
    <ul> 
     <li ng-repeat="category in SummaryCategories"> 
      <a href="#tabs-{{$index + 1}}">{{category.Name}}</a> 
     </li> 
    </ul> 

    <div ng-repeat="category in SummaryCategories" id="tabs-{{$index + 1}}" repeat-done> 
     {{category.Content}} 
    </div> 
</div>

如果我將它移動到前面的ng-repeat項目的事情，但不完全正確。如果我將它移到父容器中，事情根本不起作用。

把這個指令應用到最後一個孩子似乎是錯誤的，而是有辦法將它應用到根，並以某種方式完成相同的事情。

<div id="summaryTabPanel" repeat-done>

這是可能以某種方式與Angular？

來源

2014-09-01 Cowman

根據這一link你應該寫你的指令，這樣

Application.Directives.directive("repeatDone", function() { 
return { 
    restrict: "A", 
    link: function (scope, element, attrs) { 
     $timeout(function() { 
      $("#summaryTabPanel").tabs({ 
        event: "mouseover" 
      }); 
     }); 
    } 
});

請看看我創造來說明你的情況jsfiddle。

來源

2014-09-01 23:01:44

AngularJS指令用於訪問子級的ng-repeat範圍

回答

相關問題