动态更改Angular指令元素属性 [英] Change Angular directive element attribute dynamically

问题描述

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

我已经尝试在预编译期间实现这一点，但是angular对新属性的添加没有反应.

我用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上可以看到

I am trying to create a custom directive which extends the functionality of an existing element. I would like to detect if a certain attribute exists and if not then add it (e.g. ng-class).

I have tried to achieve this during pre-compilation but angular does not react to the addition of the new attribute.

I created a plunker with a simple example using 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){

                 }
             }
         },
      };
    });

If I add ng-hide="true" in the html then the submit button is hidden correctly. If I leave it to the directive then I can see that the DOM has the element set up correctly but the element is not hidden:

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

Any help appreciated!

解决方案

You can do this in the linking function by

• Setting the directive's priority high, so it runs before all others.
• Set it to terminal, so others don't run after it.
• Recompile the element after you make changes to it (such as adding attributes)

For example:

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

As can be seen on http://plnkr.co/edit/tHNvCxVn2wURO38UtI0n?p=preview

这篇关于动态更改Angular指令元素属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！