Direktive, die demselben Element in angular.js andere Anweisungen hinzufügt

Question

Wie erstelle ich eine Direktive, die einem Element andere Direktiven hinzufügt?

Zum Beispiel, ich will:

<input tag/> 

verknüpft werden wie:

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

Answer 1

ich mit einer Lösung kam, die zu funktionieren scheint:

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

Der Schlüssel ist, sicherzustellen, dass die Richtlinie eine höhere Priorität als alle anderen Richtlinien zu dem Element hat und beendet, so dass andere Dir ectives arent kompiliert und verknüpft.

Answer 2

Ich glaube nicht, $compile(), eine Link-Funktion oder terminal sind notwendig. Angular kompiliert automatisch die telement für uns.

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

mit diesem HTML Geprüft:

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

Plunker.