AngularJS Directive - функция повторного запуска ссылки на изменение параметра области

Question

У меня есть директива, которая строит набор вложенных элементов <ul>, представляющих структуру папок. Я использовал функцию связи для создания новых элементов DOM и присоединять их к директиве экземпляра элемента:

function link(scope, iElement, iAttr) { 
    var rootElement = buildChildElement(scope.tree); 
    iElement.append(rootElement); 
} 

элементов внутри <ul> дерева проводных с сопротивлением/вывод взаимодействиями jQueryUI, что вызвать функцию контроллера ЖИЛИЩНА директиву для обновления параметра области на основе перетаскивания событий &.

Я хочу, чтобы дерево <ul> автоматически обновлялось при изменении параметра области. Я попробовал функцию часов в моей функции связи:

scope.$watch('tree', function(newTree, oldTree) { 
    var newRoot = buildChildElement(newTree); 
    iElement.contents().remove(); 
    iElement.append(newRoot); 
} 

Это работает в определенной степени, но призыв к remove() пожаров от метода $watch() второй раз, который в конечном итоге возвращаясь мои изменения контроллера. Если я прокомментирую remove(), я вижу, что написано новое дерево <ul>, которое правильно отражает изменения параметра, внесенного в контроллер.

Двойная стрельба $watch() заставляет меня думать, что я собираюсь сделать это неправильно. Без него мой параметр правильно обновляется, но мой <ul> не обновляется (выпавший элемент остается там, где он был удален).

Каков правильный способ убедиться, что ваша директива обновлена ​​при изменении одного из параметров области?

Должен ли я использовать функцию compile и строить дерево <ul> на основе массива атрибутов вместо использования функции link?

Answer 1

Ваш подход очень jQuery-стиля. Я думаю, вы обнаружите, что в этом случае вы работаете против Angular. sh0ber прав со своим вопросом; вы должны опубликовать демо-версию или что-то еще, или, по крайней мере, некоторый примерный код, чтобы вы могли получить эффективный ответ.

Я думаю, что вы хотите сделать рекурсивную директиву дерева. Check out this SO answer для некоторых интересных подходов к этому. Основная идея заключается в том, что часы не нужны. Просто измените объект, и Angular позаботится обо всем остальном. Наиболее эффективным является изменение объектов конкретного узла, а не замена всего объекта, но это тоже сработает.

Answer 2

scope.$watch('tree', function(newTree, oldTree) { 
    var newRoot = buildChildElement(newTree); 
    iElement.contents().remove(); 
    iElement.append(newRoot); 
},**true**) 

Я думаю, вы можете попробовать и ссылаться на часы API для получения дополнительной информации Вот еще один artical http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm