Как установить порядок дочерних директив, которые зарегистрированы на родительских директив

Question

Скажем, у меня есть форма, как это:

<form> 
    <label for="foo-1">Lorem 1</label> ... <input id="foo-1" /> 
    ... 
    <label for="foo-N">Lorem N</label> ... <input id="foo-N" /> 
</form> 

Для каждого из этих элементов у меня есть директивы для некоторой формы, связанные с логикой. Это может выглядеть так.

<form x-parent> 
    <label for="foo-1" x-child-1>Lorem 1</label> ... <input id="foo-1" x-child-2 /> 
    ... 
    <label for="foo-N" x-child-1>Lorem N</label> ... <input id="foo-N" x-child-2 /> 
</form> 

x-child-1 и x-child-2require: "xParent" и зарегистрировать себя на xParentCtrl.

Вопрос

Могу ли я указать, что каждый x-child-2 должны зарегистрироваться на xParentCtrlперед темx-child-1? I не может объединить x-child-1 и x-child-2 в новую директиву, такую ​​как x-super-child, поскольку я не знаю, какая разметка окружает директивы. Я также хочу использовать иногда только x-child-1 или только x-child-2, но если оба они присутствуют, мне нужно выполнить x-child-2 до x-child-1.

Answer 1

Вы можете использовать тот факт, что функции link.post (используемые чаще всего просто как link) сначала запускаются на дочерних элементах, а затем только на родителя. Таким образом, вы можете сделать что-то вроде этого:

.directive('childOne', function() { 
    return { 
     require: ['parent', 'childOne'], 
     link: function ($scope, $element, $attrs, ctrls) { 
      var parentCtrl = ctrls[0], 
       ctrl = ctrls[1]; 
      parentCtrl.register(ctrl, $element[0]); 
     } 
    }; 
}) 
.directive('childTwo', function() { 
    return ...; // same as childOne 
}) 
.directive('parent', function() { 
    return { 
     require: 'parentCtrl', 
     link: function ($scope, $element, $attrs, parentCtrl) { 
      // do whatever you want with your child controllers 
      // in any order you want (they're all registered now, 
      // so it's up to you) 
     }, 
     controller: function() { 
      this.register = function (childCtrl, element) { 
       // store the controller associated with its element, 
       // but don't perform any other logic immediately; leave 
       // it to this directive's linking function 
      }; 
     } 
    }; 
}) 

---

Однако вышеуказанные работы только до тех пор, пока нет асинхронного шаблона загрузки между вашими родительскими и дочерними директивами (наиболее часто является результатом использования templateUrl). Если это не так, то вам необходимо заново продумать свой дизайн и либо

• место посредника «реестр» директиве Собирая ребенок контроллеры достаточно близко к детям, что нет асинхронной загрузки между ними, или
• переработайте свою логику, чтобы не требовать правильного порядка регистрации.