angularJS如何在指令的鏈接中更改屬性

Question

我在應用程式中設定進度
我想控制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();
      }
    };
  });

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

Answer 1

在鏈接函數中使用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);
      }
    };
  });

Answer 2

只需使用：

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

您不想使用attrs.data-total = 20因為-會強制減去。

在JavaScript中使用x[keyName]代替x.keyName始終是合法的，並且當keyName是一個奇怪的鍵（例如**$^ùjsls*或data-value時，必須使用第二種表示法。 一個更有用的情況是鍵是變量。

最后一件事：您將始終重寫編碼器的輸入。 它可能有道理，但不是很優雅。