Angularjs - ng在模板中重复

时间:2013-02-08 17:43:19

标签: javascript angularjs

我正在尝试在指令中使用ng Repeat - 但我真的不知道该怎么做。我接近了吗?

Mowers是我的控制器中使用此指令的数组。

.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
        }
    }
});

1 个答案:

答案 0 :(得分:1)

是的,你很接近,但语法已关闭。你需要在你的范围内为mowers分配一些内容。

.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 }
            ];
        }
    }
});

此外,您无需自行引用<slider>

上述代码还假设您已为<film><frame>制定了指令。

最后,如果您想从外部范围传递割草机数组,您可以将范围设置更改为:

scope: {
   mowers: '='
}

然后你可以这样设置它:

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

其中myMowers是控制器或父指令范围的变量。

我希望有所帮助。