Angular中的Transclude元素导致重复属性出现问题

Question

我有以下指令：

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()">

转化成功有效，但Angular最终将原始input元素中的属性放在模板的root元素上以及转换后的{{1>元素。见这个截图：

请注意根input和嵌套div元素如何设置input以及其他属性？

此重复似乎导致我的申请中出现问题。是否可以避免这种情况？

Answer 1

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

  

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

解决此问题的一种可能方法是从编译函数中的contains元素中删除所有不需要的属性：

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

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