javascript - How to remove directive before it gets processed by angular? -


i trying create directive encapsulates label , input field:

<form-field label="name" ng-model="person.name"></form-field> 

directive definition:

app.directive("formfield", function(){     var ignoreattrs = ["label"];     return {       priority: 3, //so executes before ngmodel.       template: "<div>" +                      "<label>{{label}}</label>" +                      "<input type='text' />" +                     "</div>",       scope: true,       compile: function(telement, tattrs){         var $input = telement.find("input");          //copy attributes directive element inner input field         var attrs = [];         $.each(telement[0].attributes, function(index, attr){           if(ignoreattrs.indexof(attr.label) < 0){             attrs.push(attr.name);             $input.attr(attr.name, attr.value);           }         });          //remove attributes directive element         $.each(attrs, function(index, attr){           telement.removeattr(attr);         });          return function postlink(scope, element, attrs){           scope.label = attrs.label;         };       }     };   }); 

the problem i'm running when angular traverses dom finds 2 directives: form-field , ng-model. causes ng-model set in form-field element , in input, when intent have ng-model in input.

is there way tell angular ignore directive or there earlier moment in lifecycle when can run logic copies , removes attributes angular not find ng-model directive in form-field?

a possible solution have other directives have prefix angular not recognize them, in compile function of form-field remove prefix before copying input i'm looking cleaner solution.

since terminate may cause undesirable side-effects, simple , trouble-free solution decorate directives keep them compiling:

app.config(function($provide){   var blacklisteddirectives = ['ngmodel'];    angular.foreach(blacklisteddirectives, function (directive) {     $provide.decorator(directive + 'directive', function ($delegate) {       angular.foreach($delegate, function (ddo) {         var compile_ = ddo.compile || function () {};          ddo.compile = function (element) {           if (element.attr('form-field') !== undefined || element.prop('tagname').tolowercase() == 'form-field')             return;            return compile_.apply(this, arguments) || ddo.link;         };       });        return $delegate;     });   }); }); 

Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -