Question

好的，让我开始说我有一个指令，它创建了一个带有支持字段的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可以用某种方式吗？

Answer 1

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

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

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

用于访问子项的ng-repeat范围的AngularJS指令

1 个答案: