指令，将其他指令添加到angular.js中的相同元素

Question

如何创建一个将其他指令添加到元素的指令？

例如，我想：

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

Answer 1

我想出了，似乎工作的解决方案：

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

的关键是

<input tag/> 

为被链接确保该指令比元素上的所有其他指令具有更高的优先级并终止，以便其他目录ectives不被编译和链接。

Answer 2

我不认为$compile()，链接功能，或terminal是必要的。 Angular会自动为我们编译telement。

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

测试这个HTML：

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

Plunker。