javascript - Transclude element in Angular is causing issues with duplicate attributes -
i have following directive:
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 }; });
which want use so:
<input type="text" placeholder="search internal tags" ui-search-input ng:model="tagquery" ng:change="showcandidatetags()">
the transclude works, angular ends putting attributes original input
element on root
element of template as as transcluded input
element. see screenshot:
notice how root div
, nested input
elements both have ngmodel
set, other attributes?
this duplication appears causing issues in application. possible avoid @ all?
as mentioned in comment, expected result when using template in directive, quoted angular doc:
template - replace current element contents of html. replacement process migrates of attributes / classes old element new one.
one possible way workaround behavior remove unwanted attributes containing element in compile function:
compile: function(telem, tattrs) { ['ngmodel', 'ngchange', 'type', 'placeholder'].foreach(function(name) { telem.removeattr(tattrs.$attr[name]); }); }
Comments
Post a Comment