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

Plunker

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

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

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

2 个答案: