Angular JS - ngRepeat in a Template

Question

Angular JS - ngRepeat in a Template

I'm trying to use ngRepeat in a directive - but I really don't know how to do it. Am I close?

Mowers is an array in my controller where this directive is used.

.directive('slider', function() {
return function() {
    template: '<slider><film><frame ng-repeat="mower in mowers">{{mower.series}}</frame></film></slider>';
    replace: true;
        scope: true;
    link: function postLink(scope, iElement, iAttrs) {
            // jquery to animate
        }
    }
});

javascript
angularjs

Answer 1

Yes, you're close, but the syntax was off. and you need to assign something to mowers on your scope.

.directive('slider', function() {
return {
    restrict: 'E', //to an element.
    template: '<film><frame ng-repeat="mower in mowers">{{mower.series}}</frame></film>',
    replace: true,
    scope: true, // creates a new child scope that prototypically inherits
    link: function postLink(scope, iElement, iAttrs) {
            scope.mowers = [
               { series: 1 },
               { series: 2 },
               { series: 3 }
            ];
        }
    }
});

Also, you need to not reference <slider> in itself.

The above code also assumes you've made directives for <film> and <frame>.

Finally, if you wanted to pass the mowers array in from an external scope, you'd change your scope setting to this:

scope: {
   mowers: '='
}

And you could then set it like so:

<slider mowers="myMowers"></slider>

where myMowers is a variable on your controller or parent directive's scope.

I hope that helps.