动态更改Angular指令元素属性

Question

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

我试图在预编译期间实现这一点,但angular不会对添加新属性做出反应.

我使用ng-hide 创建了一个带有简单示例的plunker.

<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正确设置了元素但是元素没有被隐藏:

<input hide="" type="submit" value="Submit" ng-hide="true">

任何帮助赞赏!

Answer 1

您可以在链接功能中执行此操作

• 将指令的优先级设置为高,因此它在所有其他指令之前运行.
• 将其设置为终端,以便其他人不会在它之后运行.
• 在对元素进行更改后重新编译元素(例如添加属性)

例如:

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上看到