Question

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

我首先尝试在模板中使用ng-attr-typeahead =＆＃39; {{myTypeahead}}＆＃39;。我期待着，在myTypeahead＆＃39;未设置，没有证据表明＆＃34; typeahead＆＃34;属性。相反，在指令处理期间，属性存在于具有未定义值的属性列表中，并且调用了typeahead指令并且因为其输入未定义而立即爆炸。

然后我尝试使用像这样的后编译函数：

    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]);
            }
        }
    }

这使得＆＃34;预先输入＆＃34; input元素的属性，但不调用typeahead指令。

我希望这可能与其他一些帖子重复，但我没有搜索正确的词语来找到它。

Answer 1

当你在你的指令元素中添加其他指令时，那些应该从指令的compile函数中添加，你可以从编译返回的postLink函数编译指令元素。 / p>

<强>代码

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 answe r以获得更好的解释

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

1 个答案: