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-2 require: "xParent"并在xParentCtrl上注册。

问题

我可以指定每个x-child-2应在<{em> xParentCtrl之前在x-child-1 上注册吗？我无法将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的结果），上述工作就会起作用。如果不是这样，您需要重新考虑您的设计

放置中介＆＃34;注册表＆＃34;收集儿童控制器的指令足够接近孩子，因为它们之间没有异步加载，或
重新设计您的逻辑，不要求正确的注册顺序。

如何设置在父指令上注册的子指令的顺序

1 个答案: