I set a progress in my app
I want to controll The progress in angular's directive
but how can I change data-value and data-total in directive's link func?

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>

In this html, I want change data-value and data-total

I try this:

app.js

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

But it doesn't work
so I want to know how to change it in my directive?

I set a progress in my app
I want to controll The progress in angular's directive
but how can I change data-value and data-total in directive's link func?

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>

In this html, I want change data-value and data-total

I try this:

app.js

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

But it doesn't work
so I want to know how to change it in my directive?

• javascript
• jquery
• angularjs
• angularjs-directive

Share Follow asked May 24, 2015 at 10:39 natailanataila 1,61944 gold badges2020 silver badges2626 bronze badges 5

• why you not set this attributes directly in html? – Grundy Commented May 24, 2015 at 10:47
• what？ this attributes already in html, i just want to change it when data change – nataila Commented May 24, 2015 at 11:28
• Another thing that caught my attention, elem.progress()? What is that or you just trying something? – Michelangelo Commented May 24, 2015 at 12:38
• @nataila, in html you have data-value="39" data-total="50" why not data-value="10" data-total="20"? – Grundy Commented May 24, 2015 at 12:58
• @Grundy I just want to change them in JS.... – nataila Commented May 25, 2015 at 3:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Use attrs.$set() in your link function and repile the element. Also, don't forget to inject the $pile service to your directive. In your html you've added the directive as an attribute but didn't mention it in the restrict value in your directive definition. You need to mention it in directive definition. See the code bellow:

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

Simply use :

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

You don't want to use attrs.data-total = 20 because the - will force a subtraction.

It's always legal in javascript to use x[keyName] instead of x.keyName, and you must use this second notation when keyName is a strange key such as **$^ùjsls* or data-value. A more useful case is when the key is a variable.

On last thing : as you do, you will always rewrite the coder's inputs. It may have sense, but it's not very elegant.