angularjs - 数组作为模型在服务为空时中断

Question

我有两条路线:一条具有自定义组件，该组件可重复数组中的数据并允许用户添加和删除项，另一条仅显示模型。模型存储在服务中。模型JSON数据如下所示:

[
    {name: "one"},
    {name: "two"},
    {name: "three"}
]

这些组件都使用 ng-model并将 this分配给变量 vm。遵循约翰·帕帕(John Papa)风格指南中的所有最佳做法。

如果我通过使用 slice()， pop()或将数组长度设置为0来清空数组，则会中断。您仍然可以向其中添加数据，但是如果导航到其他路线，则模型将显示为空数组。而且，如果您再次导航回该数组，则该数组仍为空。

如果我使模型成为具有键和数组作为值的对象，那么一切都会按预期进行。所以我的问题是，这仅仅是一个限制，还是我做错了什么？

{
    myarray: [
        {name: "one"},
        {name: "two"},
        {name: "three"}
    ]
}

这是使用包含数组的对象的 working example。

这是仅使用数组的 non working example。

您将看到一个无效的数组，将其清空，然后添加到数组中，它将不会在路由之间持久化数据。

Answer 1

you'll empty the array and then add to it, it will not persist data across the routes

第一个问题:在 getAsync()方法中。

当您的 model为空时，您每100毫秒调用一次 callAtInterval()，而您从不解决 promise (无限循环)。

function getAsync() {         
        function callAtInterval() {
            if (!_.isEmpty(genericHttpModel.model)){
                $interval.cancel(promise);
                deferred.resolve(get());
            }                
        }
        var deferred = $q.defer();
        var promise = $interval(callAtInterval, 100);
        return deferred.promise;
    }

因此，当用户转到 home( root)路线时:

 genericHttpService.getAsync().then(function(model){
      vm.model = model; // <-- never called 
    });

因此，删除 if (!_.isEmpty(genericHttpModel.model))语句

function callAtInterval() {                
     $interval.cancel(promise);
     deferred.resolve(get());
    }                
}

第二个问题:在 add方法中:

 function add() {
       if (modelEmpty()) {
         initModelAndAddOne();
       } else {
        vm.model.push({});
      }
    }

在 initModelAndAddOne中，您可以使用以下命令重置 vm.model的原始实例:

 vm.model = [];

您的模型已经是空的，为什么要使用 =[]重新定义它，使其变得简单:

 function add() {
   vm.model.push({});
  }

Working Example Plunker

working example using the object containing the array.

那么为什么起作用:

第一次关闭_.isEmpty(genericHttpModel.model)将始终返回false，因为对象包含字段names a.e:genericHttpModel.model = {names:[]}

2nd-vm.model = []仅重置names字段，而不重置服务对象