javascript - angularJS如何更改指令链接中的属性

Question

我在我的应用程序中设置了进度
我想控制 Angular Directive(指令)的进度
但是如何更改指令链接函数中的 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

在链接函数中使用 attrs.$set() 并重新编译该元素。另外，不要忘记将 $compile 服务注入(inject)到您的指令中。在您的 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);
      }
    };
  });