AngularJS 指令用于访问子级的 ng-repeat 范围答案

【问题标题】：AngularJS directive for accessing ng-repeat scope of childAngularJS 指令用于访问子级的 ng-repeat 范围
【发布时间】：2014-10-25 13:23:56
【问题描述】：

好的，让我开始说，我有一个指令，它创建一个 JQueryUI 选项卡设置，其支持字段基本上填充选项卡名称和选项卡内容。

<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-repeat。

由于我要将 JQueryUI Tab 函数应用到父容器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"
                    });
                }
                ;
            });
        }
    };
});

这会观察是否找到最后一个重复项，然后通过语句 $("#summaryTabPanel").tabs() 应用 DOM 更改

这一切都很好，但只有当我将指令应用于 summaryTabPanel 容器的最后一个 ng-repeated 子项时它才有效。

<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 能以某种方式实现吗？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

根据这个link，你应该像这样写你的指令

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

请查看我创建的 jsfiddle 来说明您的情况。

【讨论】：