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

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


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -