我有两条路线:一条具有自定义组件,该组件可重复数组中的数据并允许用户添加和删除项,另一条仅显示模型。模型存储在服务中。模型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。
您将看到一个无效的数组,将其清空,然后添加到数组中,它将不会在路由之间持久化数据。
最佳答案
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:[]}
vm.model = []
仅重置names
字段,而不重置服务对象关于angularjs - 数组作为模型在服务为空时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46546446/