我处于需要能够重用模型的场景中。基本上,用户在一个视图上选择动态数量的项目,然后他们需要为他们在以下视图中选择的每个项目输入各种数据。
例如,在视图#1上,我选择“A,D,G”。
然后在视图#2上,我必须为A,D,G填写以下内容:
A:姓名,颜色,年龄
D:姓名,颜色,年龄
G:姓名,颜色,年龄
最初,我让它设置得像这样,但意识到它不是非常可重复使用的:
angular.module('itemApp')
.directive('itemInfo', function () {
return {
templateUrl: 'views/directives/item-info.html',
restrict: 'E',
controllerAs: 'item',
scope: {
myItems: '='
},
controller: function ($scope) {
var vm = this;
vm.myItems = $scope.myItems;
vm.hideNextItem = false;
vm.hidePrevItem = false;
vm.currentItem = vm.myItems[0];
vm.itemStep = '1';
vm.itemInfo = {
name: '',
color: '',
age: ''
}
...
}
};
});
然后我会在视图中使用ng-repeat来检索第一个项目的信息,将其推入服务中的数组,重置模型,使用函数选择下一个项目,更改项目步骤,以及然后重复一遍有什么方法可以在服务中设置itemInfo模型,以某种方式为每个项目创建它的副本,并将每个项目的信息存储在服务中的数组中?这样我就可以在服务中获得所有三个项目信息,我不必担心在指令中重置模型等。最后,我希望获取所有三个项目的数组,并在完成此步骤后调用Web服务,如果所有数据都在一个位置,则会更容易。