Directive sometimes not getting values

1

Hi! In an ng-repeat list of routes, I have this:

<stars rating="{{ route.rating }}"></stars>

And on the route view page, i have the same:

<stars rating="{{ route.rating }}"></stars>

But on the view page, sometimes the value for rating is not transfered on the rendering of the page.

I’m using RC 1.

The directive is simple:

app.directive('stars', function() {
return {
    restrict: 'E',
    link: function(scope, element, attrs) {
        var html = "";
        var stars = attrs.rating;
        for (i = 1; i <= stars; i++) {
            html += '<img src="img/star-20.png" />';
        }
        element.html(html);
    }
}
});

What’s happening is that attrs.rating simply have no value. If I manually enter, say 5 (removing {{ route.rating }}), it works just fine again). So it’s something with the binding of the data that’s just not happening.

If I apply a $timeout of 1 second, this directive gets its values. Why ?

2

As usual, I found the answer myself eventually. Dynamic variables must be observed within the directive before modification back into the view. Final code looks like:

app.directive('stars', function($timeout) {
return {
    restrict: 'E',
    link: function(scope, element, attrs) {
        // Must observe on dynamic scope variables
        attrs.$observe('rating',function(){
            var html = "";
            var stars = attrs.rating;
            for (i = 1; i <= stars; i++) {
                html += '<img src="img/star-20.png" />';
            }
            element.html(html);
        });
    }
}});