direttiva che aggiunge altre direttive allo stesso elemento in angular.js

Question

Come si crea una direttiva che aggiunge altre direttive a un elemento?

Ad esempio, voglio:

<input tag/> 

da collegare come:

<input ng-pattern='/[\\w\\d]+/' ng-maxlength='10'/> 

Answer 1

mi si avvicinò con una soluzione che sembra funzionare:

.directive('tag', ['$compile', function($compile) { 
    return { 
    priority: 1000, 
    terminal: true, 
    compile: function(telement, attrs) { 
     attrs.$set('tag', null); 
     attrs.$set('ngMaxlength', '10'); 
     attrs.$set('ngPattern', '/[\\w\\d]+/'); 

     var link = $compile(telement); 

     return function($scope, $element) { 
     link($scope, function(clonedElement) { 
     $element.replaceWith(clonedElement); 
     }); 
     } 
    } 
    } 
}]); 

La chiave è assicurandosi che la direttiva abbia una priorità più alta di tutte le altre direttive sull'elemento e che termini, così che altre dir ectives non compilati e collegati.

Answer 2

Non penso che sia necessario il $compile(), una funzione di collegamento o terminal. Angular compilerà automaticamente il telement per noi.

.directive('tag', [function() { 
    return { 
    priority: 1000, 
    compile: function(telement, attrs) { 
     attrs.$set('tag', null); 
     attrs.$set('ngMaxlength', '10'); 
     attrs.$set('ngPattern', '/[\\w\\d]+/'); 
    } 
    }; 
}]); 

testati con questo HTML:

<input ng-model="test" ng-init="test=2" tag> 
{{test}} 

Plunker.