Angularjs: ngRepeat and directive

Question

I am trying to make some reusable countdown widgets. Works well with a static content, but when i'm trying to add them on the fly, my directive doesn't understand the variables inside the ngRepeat.

Markups:

<div ng-repeat="cdn in countdowns" class="countdown" countdown-end="{{cdn}}">
  <p ng-hide="over">{{days}} jours {{hours}} heures {{minutes}} min {{seconds}} sec</p>
  <p ng-show="over">Done</p>
</div>

Directive:

...
link: function(scope, elm, attrs) {
  scope.days = '1';
  ...
}
...

http://jsfiddle.net/hFGb7/14/

Thanks for the replies.

Answer 1

The problem is that the interpolation is not run by the time link function is called. So the value of {{cdn}} is not available. There are couple of ways of handling this:

1. You can use cdn directly in the link function since it is available on the scope. But this will make the directive dependent on the presence of cdn in the scope.
2. The recommended way to get the value of attributes that use interpolation is to use $observe. Check this: http://jsfiddle.net/hFGb7/28/