指令，將其他指令添加到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。