Директива AngularJS для доступа к области ng-repeat для ребенка

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

Как я буду применять функцию JQueryUI Tab к родительскому контейнеру id="summaryTabPanel", мне нужно подождать, пока не будет отображен весь объект.

Так что я сделать некоторые исследования и выяснить, нужно создать директиву, вид выглядит следующим образом:

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> 

Возможно ли это как-то с угловым?

Answer 1

Согласно этому link вы должны написать директиву, как этот

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

Пожалуйста, посмотрите на jsfiddle я создал для иллюстрации вашего дела.