angularJS如何在指令中修改属性link

angularJS how to change attrs in directive's link

本文关键字：修改 属性 link 指令 angularJS      更新时间：2023-09-26

我在应用程序中设置了一个进度
我想在angular指令
中控制进度但是我怎么能改变data-value和data-total在指令的链接函数?

app.html 

    <div class="ui indicating small progress" data-value="39" data-total="50" plan-progress>
      <div class="bar">
        <div class="progress"></div>
      </div>
    </div>

在这个html中，我想改变data-value和data-total

我试试这个:

app.js 

  todoApp.directive('planProgress', function() {
    return {
      link: function(scope, elem, attrs) {
        attrs.value = 10
        attrs.total = 20
        elem.progress();
      }
    };
  });

但是行不通
所以我想知道如何在我的指令中改变它?

在链接函数中使用attrs.$set()并重新编译元素。另外，不要忘记在你的指令中注入$compile服务。在你的html中，你已经添加了指令作为一个属性，但没有在指令定义的限制值中提到它。你需要在指令定义中提到它。请看下面的代码:

todoApp.directive('planProgress', function($compile) {
    return {
      restrict: 'A',
      link: function(scope, elem, attrs) {
        attrs.$set('value', 10);
        attrs.$set('total', 20);
        $compile(elem)(scope);
      }
    };
  });

直接使用:

 attrs["data-value"] = 10;
 attrs["data-total"] = 20;

您不希望使用attrs.data-total = 20，因为-将强制减法。

在javascript中使用x[keyName]而不是x.keyName总是合法的，并且当keyName是一个奇怪的键(如**$^ùjsls*或data-value)时，您必须使用第二种符号。更有用的情况是当键是一个变量时。

最后一件事:当你这样做时，你将总是重写编码器的输入。它可能有意义，但不是很优雅。

相关文章：