AngularJS : 在模板子元素上调用可选的嵌套指令

Question

我正在尝试编写一个指令，为表单中的字段发出所有 HTML - 包装 div、标签、输入等。对于我想要的某些字段使用 Angular UI Bootstrap's "typeahead" directive.

我首先尝试在模板中使用 ng-attr-typeahead='{{myTypeahead}}'。我预计，在未设置 'myTypeahead' 的字段中，不会有 "typeahead" 属性的证据。相反，在指令处理期间，属性以未定义的值出现在属性列表中，并且 typeahead 指令被调用并迅速爆炸，因为它的输入是未定义的。

然后我尝试使用 post编译函数，如下所示：

    compile: function compile(tElement, tAttrs, transclude) {
        return function postLink(scope, iElement, iAttrs, controller) {
            if ( iAttrs.eiTypeahead !== undefined ) {
                var me = $(iElement);
                var input = $("input", me);
                input.attr("typeahead", iAttrs.eiTypeahead);
                $compile(input[0]);
            }
        }
    }

这会将 "typeahead" 属性放在输入元素上，但不会调用 typeahead 指令。

我想这可能是其他一些 post 的副本，但我没有搜索正确的词来找到它。

Answer 1

当您向指令元素添加其他指令时，应从指令的 compile 函数中添加这些指令，并且您可以从 postLink 函数编译指令元素，其中 return 来自编译。

代码

compile: function compile(tElement, tAttrs, transclude) {
    if ( iAttrs.eiTypeahead !== undefined ) {
       var me = $(iElement);
       var input = $("input", me);
       input.attr("typeahead", iAttrs.eiTypeahead);
    }
    return function postLink(scope, iElement, iAttrs, controller) {
        $compile(input[0]);
    }
}

您可以参考 this answer 以获得更好的解释

AngularJS : 在模板子元素上调用可选的嵌套指令

AngularJS : invoking optional nested directive on template sub-element

javascript

dom

angularjs

angularjs-directive

angularjs-compile