обновить конкретные директивы в angularjs

Question

Я вытаскиваю свои волосы, пытаясь использовать каждую комбинацию, чтобы попытаться получить ветви дерева, чтобы правильно обновиться, когда в дереве будут внесены изменения. По сути, у меня есть набор рекурсивных вложенных директив для отображения ветвления дерева. Я построил класс javascript для хранения данных директивы для любой части дерева. Класс содержит модель, с которой я по существу сопряжен, поэтому у нее есть несколько известных методов (например, getVals() для загрузки данных из ajax и getId(), getName(), getLabel() для извлечения общих свойств для построения дерева). Затем я использую его двумя способами, чтобы построить дерево с парами этого объекта, первое для данной точки ветвления будет содержать одну модель (с несколькими subBranches), описывающую «группу» (с данными, загружаемыми из коллекции ORM Doctrine это в основном массив объектов стиля сущности doctrine), а другой - единственная модель, представляющая сущности, являющиеся фактическими ветвями. Идея состоит в том, что любая соединительная линия (точка ветвления) будет иметь два варианта: один для отображения деталей для этой группы/родителя, а другой для отображения только имен детей. Тогда у каждого ребенка будет возможность показать его детали или показать его детям и так далее.

function treeBranch() { 
    this.refresh = false; 

    // class and title information for expander button 
    this.toggleShown = function() { 
     this.vis = !(this.vis); 

     if(this.vis == true) { 
      this.trunkClass = 'glyphicon glyphicon-chevron-down'; 
      this.trunkTitle = 'collapse'; 
     } else { 
      this.trunkClass = 'glyphicon glyphicon-chevron-right'; 
      this.trunkTitle = 'expand'; 
     } 
}; 

    // default populator code 
    this.populate = function(toggle,force,pcbf) { 
     toggle = (typeof(toggle) == 'boolean') ? toggle : true; 
     force = (typeof(force) == 'force') ? force : false; 
     var br = this; 
     if((typeof(br.subBranches) == 'undefined') || (br.subBranches.length == 0)) 
      force = true; 

     if((typeof(br.model) != 'undefined') && (typeof(br.loadMethod) != 'undefined')) { 
      br.model[br.loadMethod](
       function() { 
        br.subBranches = []; // reset subBranches array 
        for(var k in br.model.subs) { // subs should be loaded with a keyed array 
         var newSubBranch = new treeBranch(); 
         newSubBranch.model = br.model.subs[k]; 
         newSubBranch.label = 'Name: ' + newSubBranch.model.getName(); // expects model to have a getName method 
         newSubBranch.trunk = br; 
         br.subBranches.push(newSubBranch); 
        } 
        (toggle == true) && br.toggleShown(); 
        (typeof(pcbf) == 'function') && pcbf(); 
       }, 
       force, 
       br.model.getFilter() 
      ); 
     } 
    }; 

    this.getLabel = function() { 
     if(this.model != null) { 
      return ((typeof(this.model.getId) == 'function') ? this.model.getId() : '') + 
       ((typeof(this.model.getName) == 'function') ? ' '+this.model.getName() : ''); 
     } else { 
      return this.label; 
     } 
    } 

    // core properties 
    this.label = ''; 
    this.vis = false; 
    this.trunkClass = 'glyphicon glyphicon-chevron-right'; 
    this.trunkTitle = 'expand'; 
    this.subBranches = []; 
    this.trunk = null; 

    this.model = null; 
    this.loadMethod = 'getVals'; // function of model to populate it with data 

}; 
/** 
    -Trunk {treeBranch with entity as model} 
     [show details option] 
     +--> branches {treeBranch instance with collection as model} 
      [show branches/children option] 
      - branch1 {treeBranch entity model} 
      [show details option] 
       +--> branches {treeBranch collection model} 
        [show branches/children option] 
        - subbranch1 ... etc 
      - branch2 {treeBranch with entity as model} 
      [show details option] 
       +--> branches {treeBranch collection model} 
        [show branches/children option] 
    ... etc ... 
*/ 

Моя проблема приходит, когда я начать добавлять функции для управления свойствами данной точки ветвления (сущности) и/или добавлять/удалять/перемещать ветви самих. У меня есть формы, работающие над добавлением/обновлением/удалением (все еще работающие на ходу), но когда данные сохраняются, поскольку мои модели выполняют свои собственные вызовы отдыха ajax, дерево не обновляется, чтобы отражать изменения. Одна из проблем заключается в том, что я установил кнопку добавления после тега UL для дочерних элементов - это я могу обновить отлично, потому что он находится в той же директиве, что и шаблон с тегами UL. Но дети находятся под второй директивой, которая привязана к ng-повторению вокруг LI для отображения каждой обертки суб-ветви. Таким образом, кнопки обновления/удаления отображаются в этом шаблоне, но область, которую мне нужно обновить, является родительским. Я понимаю, что могу сделать $ parent. $ Parent.reload(), чтобы вызвать мой скрипт обновления, но когда я перейду к выполнению функции «move», я могу перемещать элемент списка на полпути через дерево. У меня есть кнопка «Обновить» в точках разветвления в шаблоне и пробовал делать document.getElementById («branchpointX»). Click(); но это неуклюже, и у меня возникли проблемы, пытаясь найти лучший способ обновить эту точку в пределах этой функции .reload() этой области. $ scope. $ apply иногда сталкивается с существующими обновлениями $ digest, и даже бросать их в $ timeout иногда по-прежнему вызывает ошибку, что обновление уже выполняется.

Так что мне интересно, какой лучший способ обновить определенную директиву в иерархическом дереве указанных директив? Я попытался создать стек в каждом subBranch с тэгами его точек ветвления обратно в начало, но если я попытаюсь запустить treeStack ['someParentId']. Reload(), похоже, что он не работает, когда в области дочерних объектов ,

SW

Answer 1

Оказалось, что я искал установку триггеров $ broadcast, используя rootScope, которые я мог бы слушать с помощью функции $ on и callback в каждой соответствующей области.

например. сохранение, когда вызов имеет функцию обратного вызова, поэтому моя директива редактирования (в другом заводском контроллере) может добавить $ rootScope. $ broadcast ('branch1Reload'); для обратного вызова тогда директива для этой ветви просто нуждается в корневом корне. $ on ('branch1Reload', function() {/ * do stuff * /; scope.reload();});

Answer 2

Слишком много текста.

Итак, это простая директива дерево

JSON:

var youList = [ 
      {'display': 'parent 1', 'description': 'parent 1 desc', 'children': [ 
       {'display': 'parent 1 child 1', 'description': 'parent 1 desc child 1', 'children': [ 
        {'display': 'parent 1 child 1 sub-child 1', 'description': 'parent 1 desc child 1 sub-child 1', 'children': []}, 
        {'display': 'parent 1 child 1 sub-child 2', 'description': 'parent 1 desc child 1 sub-child 2', 'children': []} 
       ]}, 
       {'display': 'parent 1 child 2', 'description': 'parent 1 desc child 2', 'children': []} 
      ]}, 
      {'display': 'parent 2', 'description': 'parent 2 desc', 'children': [ 
       {'display': 'parent 2 child 1', 'description': 'parent 2 desc child 1', 'children': []}, 
       {'display': 'parent 2 child 2', 'description': 'parent 2 desc child 2', 'children': []} 
      ]} 
     ]; 

HTML:

<my-tree parent-list="youList"></my-tree> 

Директива:

.directive('myTree', function ($compile) { 
    return { 
     restrict: 'E', 
     link: function (scope, element, attrs) { 
      var parentList = attrs.parentList; 
      var template = 
       '<ul>' + 
       ' <li class="" ng-repeat="item in ' + parentList + '">' + 
       '  <label>{{item.display}}</label> : <small>{{item.description}}</small>' + 
       '  <my-tree parent-list="item.children" ng-if="item.children && item.children.length > 0"></my-tree>' + 
       ' </li>' + 
       '</ul>'; 

      element.html('').append($compile(template)(scope)); 
     } 
    } 
}) 

Добавить необходимые кнопки добавления/удаления манипулировать с ' yourList '. Обновляя любую часть «yourList», ваша древовидная структура обновляется.

Должно быть легко. Никаких навыков не требуется :)