AngularJS directive for accessing ng-repeat scope of child

Question

Okay, so let me start off saying that I have a directive that creates a JQueryUI tab setup with a backing field that populate the tab name and the tab contents basically.

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

So as you can see, I have a <ul> with an ng-repeat in the <li>.

As I will be applying JQueryUI Tab function to the parent container id="summaryTabPanel", I need to wait until all the dom is rendered.

So I do some research, and find out I need to create a directive that kind of looks like the following:

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

This watches to see if the last repeated item is found, and then applies the DOM changes via the statement $("#summaryTabPanel").tabs()

This is all fine and good, but it only works if I apply the directive to the last ng-repeated child item of the summaryTabPanel container.

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

If I move it to the previous ng-repeat item things work but not quite right. If I move it to the parent container, things don't work at all.

It seems wrong to me to apply this directive to the last child, and instead have a way to apply it to the root and somehow accomplish the same thing.

<div id="summaryTabPanel" repeat-done>

Is this possible somehow with Angular?

score 0 · Answer 1 · edited May 23 '17 at 12:24

According to this link you should write your directive like this

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

Please have a look at the jsfiddle I created to illustrate your case.

AngularJS directive for accessing ng-repeat scope of child

1 Answers1