Question

我有一个指令，我希望该模板显示数据集中的所有行

app.directive('exampleDirective', [ 'TestProvider', 'TestFactory', function (TestProvider, TestFactory) {
return {
    restrict: 'E',
    template: '<tr><td>{{Name}} </td><td>{{Surname}}</td></tr>',
    replace: true,
    link: function(scope, elm, attrs) {
       var dat= TestFactory.dataReturn();
       for (var i = 0; i < dat.length; i++) {

               scope.Name = dat[i].Name;
               scope.Surname = dat[i].Surname;
           console.log(dat[i]);
       }

       // alert("hah");
    }
};
}]);

如何让它像 ng-repeat 一样重复？

Answer 1

假设您的服务返回承诺。以下是在表格中重复数据的简单代码。

app.directive('exampleDirective', [ 'TestProvider', 'TestFactory', function (TestProvider, TestFactory) {
return {
    restrict: 'E',
    template: '<table ng-repeat="person  in  persons"><tr><td>{{person.Name  }} </td><td>{{person.Surname}}</td></tr></table>',
    replace: true,
    link: function(scope, elm, attrs) {
        TestFactory.dataReturn().then(function(resp){
            scope.persons = resp.data;
        });
    }
};
}]);

Answer 2

或者，您可以重新定义元素指令以表示单个对象，然后重复指令本身。显然，这需要移动您使用工厂的位置。您的应用程序体系结构可能会也可能无法适应此更改。

指令：

app.directive('exampleDirective', [function () {
    return {
        restrict: 'E',
        template: '<tr><td>{{person.Name}} </td><td>{{person.Surname}}</td></tr>',
        replace: true,
        scope: {
            person: '='
        }
    };
}]);

用法：

<example-directive ng-repeat="data in dataFromFactory" person="data"></example-directive>

如何重复模板

2 个答案: