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范围

回答

相关问题