Директива AngularJS до тех пор, пока не будут отображены шаблоны

Question

Я пытаюсь обернуть SharePoint People Picker в директиве AngularJS. Чтобы инициализировать сборщик людей, мне нужно разместить div на странице, предоставить ему идентификатор и передать этот идентификатор в функцию SharePoint.

я это работает с основной директивы, как это:

<sp-people-picker id="test"></sp-people-picker> 

Но я хочу, чтобы директива, чтобы быть полезной в любом месте, в том числе и в повторяющемся разделе:

<div ng-repeat="item in dataset"> 
    <sp-people-picker id="test-{{ $index }}"></sp-people-picker> 
</div> 

Это терпит неудачу. Я прошел через код, чтобы понять, что происходит не так, и обнаружил, что, когда я с удовольствием вызывал функцию выбора людей SharePoint с помощью «test-0», он не смог найти элемент. document.getElementById("test-0") возвращенный null. Причина этого в том, что у моего div все еще был идентификатор «test - {{$ index}}» и получает только «test-0» ПОСЛЕ СОГЛАШЕНИЯ моей директивы.

Как я могу убедиться, что моя директива работает после того, как {{}} была отображена?

(Не мечение с SharePoint в качестве материала SharePoint только контекст, это не на самом деле отношения к этому вопросу, я пытаюсь решить)

Answer 1

Вы должны использовать attrs.$observe внутри вашей функции директивы ссылки, которая будет действовать так же, как и $ watch, разница в том, что он может смотреть по директиве интерполяции {{}}. Ваша функция ссылок будет выглядеть ниже. Он вызывает функцию всякий раз, когда определяется директива интерполяции.

Директива (Link Функция)

link: function(scope, element, attrs){ 
    attrs.$observe(attrs.id, function(newVal, oldVal){ 
     //here you can get new value & `{{}}` is evaluated. 
    }); 
}