动态更改 Angular 指令元素属性

Posted 2023-02-19

【中文标题】动态更改 Angular 指令元素属性

【英文标题】：Change Angular directive element attribute dynamically

【发布时间】：2014-12-17 20:48:17

【问题描述】：

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

我尝试在预编译期间实现这一点，但 Angular 对添加新属性没有反应。

我created a plunker 有一个使用 ng-hide 的简单示例。

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

app.directive('隐藏', function() 返回 限制：'A'， 编译：函数（） 返回 前：功能（范围，元素，属性，控制器，transcludeFn） 属性.$set("ng-hide", true); , 发布：功能（范围，元素，属性，控制器，transcludeFn） , ; );

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

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

任何帮助表示赞赏！

【参考方案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上看到

【讨论】：

你真是个天才，谢谢！最后我不需要设置终端；优先级和编译元素（使用指令 null）成功了

我会保留terminal: true。在当前情况下，这在技术上可能不是必需的，但它确实可以防止对元素上的任何其他指令进行不必要的重新编译。