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

关键是确保指令的优先级高于元素上的所有其他指令并终止，以便其他指令不会编译和链接。