angularjs - angular.js の同じ要素に他のディレクティブを追加するディレクティブ

Question

要素に他のディレクティブを追加するディレクティブを作成するにはどうすればよいですか?

たとえば、私は欲しい：

<input tag/>

次のようにリンクします。

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

Answer 1

$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}}

プランカー。

Answer 2

うまくいくと思われる解決策を思いつきました：

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

重要なのは、ディレクティブが要素の他のすべてのディレクティブよりも高い優先順位を持っていることを確認して終了し、他のディレクティブがコンパイルおよびリンクされないようにすることです。