Dynamic DOM generation with AngularJS preventing Jquery .tab() to function correctly

Question

I'm dynamically generating a list of elements - the first loop is the list of tabs for the menu, the second list is the div with the tab contents. If I write it statically it works, but as is, it's not allowing tabs to work.

here is the view (cshtml):

<div ng-app="project" > 
   <div class="project-tab-menu ui right secondary menu" style="margin-right:1em;">
        <a class="item" data-tab={{Tab.ViewName}} ng-repeat="Tab in vm.TabData">{{Tab.DisplayName}}</a>
    </div>

    <div ng-repeat="TabContent in vm.TabData" class="ui bottom attached tab segment no-border" data-tab={{TabContent.ViewName}} >
        <div ng-include= TabContent.Url></div>
    </div>
</div>

<hr />

<script>
    $('.item').tab();
</script>

I have tried adding this to my controller to delay loading JQuery's tab function till the DOM is ready. That didn't work.

angular.element(document).ready(function () {
        $('.item').tab();
    });

The structure looks correct (from referencing a working static page with this functionality) when I look at it through dev tools in chrome.

Again, if I remove the angular directives then it works just fine, but I need this to work dynamically.

Any suggestions?

Answer 1

The problem is that the tabs are not there when you try to execute "$('.item').tab();", and it doesn´t matter if it is executed in "ready" method because this one executes functions when the DOM is fully loaded, but it doesn't identify the changes that other scripts could do (for instance, Angular and its ng-repeat).

I guess you could try to identify when all the items are in the DOM and execute your function them. For instance, by adding a directive to the ng-repeat to detect when the last item has been rendered (there are lots of examples you could find, as for instance ng-repeat finish event). In other cases, depending on the complexity, you could play with $timeout (https://docs.angularjs.org/api/ng/service/$timeout), but without the delay parameter. Without this parameter, the function that $timeout wraps will be executed once the last digest cycle was execute, so... more or less... once the staff that Angular does is done.