Javascript Angularjs必须刷新页面才能看到更改
我有一个简单的积垢操作。项目列在页面上,当用户单击“添加”按钮时,会弹出模式,用户输入数据并保存数据,数据应自动(无需刷新)添加到页面上的列表中 服务:Javascript Angularjs必须刷新页面才能看到更改,javascript,angularjs,asp.net-web-api,breeze,Javascript,Angularjs,Asp.net Web Api,Breeze,我有一个简单的积垢操作。项目列在页面上,当用户单击“添加”按钮时,会弹出模式,用户输入数据并保存数据,数据应自动(无需刷新)添加到页面上的列表中 服务: getAllIncluding: function(controllerAction, including) { var query = breeze.EntityQuery.from(controllerAction).expand(including); return manager.exec
getAllIncluding: function(controllerAction, including) {
var query = breeze.EntityQuery.from(controllerAction).expand(including);
return manager.executeQuery(query).fail(getFailed);
},
addExerciseAndCategories: function(data, initialValues) {
var addedExercise = manager.createEntity("Exercise", initialValues);
_.forEach(data, function(item) {
manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
});
saveChanges().fail(addFailed);
function addFailed() {
removeItem(items, item);
}
},
控制器:
$scope.getAllExercisesAndCategories = function() {
adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
$scope.queryItems = adminCrudService.querySucceeded(data);
var exerciseIds = _($scope.queryItems).pluck('ExerciseId').uniq().valueOf();
$scope.exerciseAndCategories = [];
var createItem = function (id, exercise) {
return {
ExerciseId: id,
Exercise : exercise,
ExerciseCategories: []
};
};
// cycle through ids
_.forEach(exerciseIds, function (id) {
// get all the queryItems that match
var temp = _.where($scope.queryItems, {
'ExerciseId': id
});
// go to the next if nothing was found.
if (!temp.length) return;
// create a new (clean) item
var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
// loop through the queryItems that matched
_.forEach(temp, function (i) {
// if the category has not been added , add it.
if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
newItem.ExerciseCategories.push(i.ExerciseCategory);
}
});
// Add the item to the collection
$scope.items.push(newItem);
});
$scope.$apply();
}
adminCrudService.addExerciseAndCategories($scope.selectedCategories, { Name: $scope.NewName, Description: $scope.NewDesc });
所以我的问题是,为什么列表不能实时更新(当我点击save时,我必须刷新页面)
编辑
这是我的疑问
querySucceeded: function (data) {
items = [];
data.results.forEach(function(item) {
items.push(item);
});
return items;
}
编辑2
我相信我已经缩小了我的问题强>
所以我花了两个小时来帮我解决这个问题(我非常感谢他),但不幸的是没有成功。我们主要是试图修复我的服务,所以当我回到我的电脑,我再次尝试修复它。我相信我的服务很好。(我已经按照卡德在回答中的建议做了一些修改)。
我相信问题出在控制器上,我记录了$scope.items,当我添加新项时,它们不会改变,之后我记录了$scope.queryItems,我注意到它们在添加新项后会改变(不刷新ofc)。所以,在加载初始数据后,通过某种方式$watching$scope.queryItems可能会解决这个问题,但目前我不太确定如何做到这一点。好的,我将发布一个答案,应该可以指导您如何解决这个问题。问题似乎不在于微风,也不在于棱角,而在于你将两人结合在一起的方式。我这样说是因为为了理解调试过程,理解您正在做的事情很重要 创建实体会将其添加到缓存中,entityState为isAdded-这是一条正确的语句,不要这样想 现在为您的代码 您不必将查询执行与承诺联系起来,但在您的情况下,您将数据返回给控制器,然后将其直接传递回服务中的某个函数,这在您的问题中没有列出。我添加了一个函数来复制您的可能的外观
getAllIncluding: function(controllerAction, including) {
var query = breeze.EntityQuery.from(controllerAction).expand(including);
return manager.executeQuery(query).then(querySucceeded).fail(getFailed);
function querySucceeded(data) {
return data.results;
}
},
现在,在控制器中,只需处理结果-
$scope.getAllExercisesAndCategories = function() {
adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
// Set your object directly to the data.results, because that is what we are returning from the service
$scope.queryItems = data;
$scope.exerciseAndCategories = [];
最后,让我们添加创建实体的属性,看看这是否给Angular提供了正确绑定的机会-
_.forEach(data, function(item) {
var e = manager.createEntity("ExerciseAndCategory");
e.Exercise = addedExercise; e.Category: item.Category;
});
所以我设法解决了我的问题!不确定这是否是正确的解决方案,但它现在起作用了。 我已将所有内容转移到我的服务中,现在看起来如下所示:
function addCategoriesToExercise(tempdata) {
var dataToReturn = [];
var exerciseIds = _(tempdata).pluck('ExerciseId').uniq().valueOf();
var createItem = function (id, exercise) {
return {
ExerciseId: id,
Exercise: exercise,
ExerciseCategories: []
};
};
// cycle through ids
_.forEach(exerciseIds, function (id) {
// get all the queryItems that match
var temp = _.where(tempdata, {
'ExerciseId': id
});
// go to the next if nothing was found.
if (!temp.length) return;
// create a new (clean) item
var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
// loop through the queryItems that matched
_.forEach(temp, function (i) {
// if the category has not been added , add it.
if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
newItem.ExerciseCategories.push(i.ExerciseCategory);
}
});
// Add the item to the collection
dataToReturn.push(newItem);
});
return dataToReturn;
}
addExerciseAndCategories: function (data, initialValues) {
newItems = [];
var addedExercise = manager.createEntity("Exercise", initialValues);
_.forEach(data, function (item) {
var entity = manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
items.push(entity);
newItems.push(entity);
});
saveChanges().fail(addFailed);
var itemsToAdd = addCategoriesToExercise(newItems);
_.forEach(itemsToAdd, function (item) {
exerciseAndCategories.push(item);
});
function addFailed() {
removeItem(items, item);
}
}
getAllExercisesAndCategories: function () {
var query = breeze.EntityQuery.from("ExercisesAndCategories").expand("Exercise,ExerciseCategory");
return manager.executeQuery(query).then(getSuceeded).fail(getFailed);
},
function getSuceeded(data) {
items = [];
data.results.forEach(function (item) {
items.push(item);
});
exerciseAndCategories = addCategoriesToExercise(items);
return exerciseAndCategories;
}
作为一个提醒,这是一个绝对吨的代码,你张贴和它是非常耗时的挖掘所有。如果您将其简化为您遇到问题的代码,确定问题发生的位置,并寻求特定帮助,您可能会取得更大的成功。您的服务上的querySucceeded功能在哪里?为什么你要返回结果,然后将其发送回服务?为什么你需要调用scope.apply?让我们用这个快速聊天…让我们
$scope.getAllExercisesAndCategories = function () {
adminExerciseService.getAllExercisesAndCategories()
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
$scope.items = data;
$scope.$apply();
}