Question

据我所知，链接应该在指令中起作用的方式是以相反的顺序调用后期链接函数。也就是说，内部元素'指令'后链接函数在外元素之前被调用。有一群掠夺者在网上展示了这种行为。

那就是说，我不理解我在this plunker中看到的行为。外链接函数是首先调用的函数。如果我不在内部指令中使用templateURl，行为就会改变，这会让事情变得更加怪异！

有人可以解释一下吗？

修改

我发现another post提出了同样的问题。从答案（来自文档）：

templateUrl - 与模板相同，但模板是从指定的URL加载的。由于模板加载是异步的，因此编译/链接将暂停，直到加载模板为止。

线程中的评论者补充道：

如果你有相互依赖的指令，你就不能指望执行的顺序。您需要将设计更改为在框架的约束内工作。如果您更新帖子中有关于您真正尝试完成的更多详细信息，我们可以帮助您重新设计指令。

所以，就在这里。

我的具体案例

我正在尝试为我的应用编写可重用的表单组件。它使用语义UI，因此每个输入字段都有一些用于样式的样板元素，尤其是下拉选择。这是我的下拉模板，用于说明为什么我宁愿编写自定义元素指令：

<div class="field">
    <label class="label">{{label}}</label>
    <div class="input">
        <div class="ui selection fluid dropdown">
            <i class="ui dropdown icon"></i>
            <div class="default text">{{default}}</div>
            <div class="menu">
                <div class="item" ng-repeat="item in collection" data-value="{{item[value]}}">
                {{item[identifier]}}
                </div>
            </div>
            <input name="{{name}}" type="hidden"  ng-required='{{required}}'/>
        </div>
    </div>
</div>

这样我可以写一些稍微冗长的东西。这一切都很好，花花公子。然而，在某些（如果不是全部）我的表单中我想在模糊上添加验证，所以我为表单编写了一个指令，查找所有输入字段，在更改时添加回调，并添加错误类如果无效。这不起作用，因为在表单指令的链接时没有输入字段，因为内部指令尚未编译和链接。

结束html看起来像这样：

<form error-directive>
    <choice name="myInput" label="MyLabel" default="Select an Item" collection="data" value="id" identifier="text" ng-model="myModel" required="true"></choice>
</form>

有更好的方法吗？

Answer 1

然而，在某些（如果不是全部）我的表单中，我想在blur上添加验证，所以我为查找所有输入字段的表单编写了一个指令，在更改时添加了一个回调，并添加了错误类无效。这不会起作用，因为在表单指令的链接时间没有输入字段，因为内部指令尚未被编译和链接。

支持AngularJS的粗体部分，您不需要自定义解决方案。

有更好的方法吗？

是：ngMessages和ngModelOptions。

如果由于某些其他原因，您需要在表单中收集所有输入，create child directives on your inputs that register themselves with a parent directive。不要使用DOM对AngularJS系统之外的子元素进行后处理;你最终会得到脆弱的代码。

AngularJS内部指令（post）链接函数在外部指令＆＃39; s之后调用

修改

我的具体案例

1 个答案: