Question

我在我的应用中设置了进度我想控制角度指令的进度
但是如何在指令的链接功能中更改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();
      }
    };
  });

但它不起作用所以我想知道如何在我的指令中改变它？

Answer 1

在链接函数中使用$compile并重新编译元素。另外，不要忘记将todoApp.directive('planProgress', function($compile) { return { restrict: 'A', link: function(scope, elem, attrs) { attrs.$set('value', 10); attrs.$set('total', 20); $compile(elem)(scope); } }; });服务注入您的指令。在您的html中，您已将指令添加为属性，但未在指令定义中的restrict值中提及它。您需要在指令定义中提及它。请参阅下面的代码：

this

Answer 2

只需使用：

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

您不想使用attrs.data-total = 20，因为-会强制减法。

使用x[keyName]代替x.keyName在javascript中始终合法，并且当keyName是奇怪的密钥（例如**$^ùjsls*或data-value）时，您必须使用第二种表示法。更有用的情况是密钥是变量。

最后一件事：正如你所做的那样，你将始终重写编码器的输入。它可能有意义，但它不是很优雅。

angularJS如何在指令的链接中更改attrs

2 个答案: