1

我有以下指令：

mod.directive('uiSearchInput', function () {
    return {
        restrict: 'A',
        template:
            '<div class="ui-search-input">' +
                '<i class="i i-search ui-search-input__icon"></i><div ng-transclude class="ui-search-input__field"></div>' +
            '</div>',
        transclude: 'element',
        replace: true
    };
});

我想这样使用：

<input type="text" placeholder="Search internal tags"
       ui-search-input
       ng:model="tagQuery"
       ng:change="showCandidateTags()">

transclude 成功工作，但 Angular 最终将我的原始input元素的属性放在root模板的元素以及transcludedinput元素上。看这个截图：

请注意根元素div和嵌套input元素如何都有一个ngModel集合以及其他属性？

这种重复似乎导致我的应用程序出现问题。有可能完全避免这种情况吗？

4

1 回答 1

0

正如我在评论中提到的，这实际上是在指令中使用模板时的预期结果，引用自 angular doc：

模板 - 用 HTML 的内容替换当前元素。替换过程将所有属性/类从旧元素迁移到新元素。

解决此问题的一种可能方法是从compile 函数中的包含元素中删除所有那些不需要的属性：

compile: function(tElem, tAttrs) {
    ['ngModel', 'ngChange', 'type', 'placeholder'].forEach(function(name) {
        tElem.removeAttr(tAttrs.$attr[name]);
    });
}

http://plnkr.co/edit/1dh75cOQeaPdofdy2HsR

于 2013-08-09T02:59:17.007 回答