动态更改Angular指令元素属性

Question

动态更改Angular指令元素属性

angularjsangularjs-directive

11

我正在尝试创建一个自定义指令，以扩展现有元素的功能。我想检测某个属性是否存在，如果不存在，则添加它（例如ng-class）。

我尝试在预编译期间实现这一点，但是Angular不会对新属性的添加做出反应。

我创建了一个plunker，其中包含一个使用ng-hide的简单示例。

<input hide type="submit" value="Submit"/>

    app.directive('hide', function() {
      return {
        restrict: 'A',
        compile: function(){
             return {
                 pre: function(scope, element, attributes, controller, transcludeFn){
                   attributes.$set("ng-hide", true);
                 },
                 post: function(scope, element, attributes, controller, transcludeFn){
}
             }
         },
      };
    });

如果我在html中添加ng-hide =“true”，则提交按钮将被正确隐藏。如果留给指令，则可以看到DOM已正确设置元素，但元素未隐藏：

任何帮助都会受到欢迎！

- Alan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michal Charemza · Accepted Answer

你可以在链接函数中做到这一点：

将指令的优先级设置高，这样它会在其他指令之前运行。
将其设置为终端，这样其他指令就不会在它之后运行。
在对元素进行更改（如添加属性）后重新编译该元素。

例如：

app.directive('hide', function($compile) {
  return {
    restrict: 'A',
    priority: 10000,
    terminal: true,
    link: function(scope, element, attrs) {
      attrs.$set('ngHide', true);
      attrs.$set('hide', null);
      $compile(element)(scope);
   }
  };
});

可以在http://plnkr.co/edit/tHNvCxVn2wURO38UtI0n?p=preview上看到。