动态更改 Angular 指令元素属性

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

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

I 创建了一个笨蛋 http://plnkr.co/edit/RIjpy4Un26054S8lLnHs?p=preview有一个使用 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 已正确设置该元素，但该元素并未隐藏：

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

任何帮助表示赞赏！

您可以通过以下方式在链接功能中执行此操作

• 将指令的优先级设置为高，以便它先于所有其他指令运行。
• 将其设置为终端，这样其他人就不会追随它。
• 更改元素后重新编译该元素（例如添加属性）

例如：

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 http://plnkr.co/edit/tHNvCxVn2wURO38UtI0n?p=preview