可重复使用的模型AngularJS

时间:2015-12-29 15:55:56

标签: javascript angularjs

我处于需要能够重用模型的场景中。基本上,用户在一个视图上选择动态数量的项目,然后他们需要为他们在以下视图中选择的每个项目输入各种数据。

例如,在视图#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服务,如果所有数据都在一个位置,则会更容易。

0 个答案:

没有答案