![](/img/trans.png)
[英]AngularJS - Custom directive not updating view even with $scope.$apply
[英]AngularJS view not updating when $scope.$apply is called
这是工作流程:
用户的帐户页面应列出该用户拥有的所有对象。
每个对象旁边都有一个“删除”按钮,用于打开Bootstrap模式。 模态询问用户他们是否真的想要删除对象,如果他们确认,那么模式应该被忽略,对象应该被删除,并且视图应该更新以反映删除。
我正在使用模态内部的确认按钮上的data-dismiss
属性来data-dismiss
模态。
这是我的控制器中删除对象和(应该)更新视图的函数:
$scope.deleteObject = function(object) {
object.destroy({
success: function(object) {
$scope.$apply();
},
error: function(object, error) {
// handle error
}
});
};
但是,我必须刷新页面以查看删除了对象的更新视图。
还有另一种方法我应该使用$scope.$apply
?
编辑:我通过创建一个新的$ scope级别函数来加载我的对象集合找到了一种解决方法。 以前,这是在加载控制器时完成的(不附加到任何特定功能。
换句话说,我的旧代码做到了这一点:
.controller('AccountCtrl', function($scope) {
var query = new Query('Object');
query.find().then(function(objects) {
$scope.objects = objects;
});
$scope.deleteObject = function(object) {
object.destroy({
success: function(object) {
// do something
}
});
}
});
现在我将find
代码包装在$ scope级别的函数中,当对象被销毁时我可以显式调用它:
.controller('AccountCtrl', function($scope) {
$scope.getObjects = function() {
var query = new Query('Object');
query.find().then(function(objects) {
$scope.objects = objects;
});
}
$scope.getObjects(); // call when the view loads
$scope.deleteObject = function(object) {
object.destroy({
success: function(object) {
$scope.getObjects(); // call again when an object is deleted
}
});
}
});
我仍然希望有一个更清洁的解决方案,即我不必通过对象集合手动更新。
在您的成功中,您必须修改本地$ scope.objects。
在你的最后一个例子中你应该尝试这个(代码没有经过测试,但这应该是它的外观):
$scope.deleteObject = function(object) {
object.destroy({
success: function(object) {
var objectIndex = $scope.objects.indexOf(object);
$scope.objects.splice(objectIndex,1);
}
});
}
在您的控制器中,您负责更新模型。 Angular负责更新视图。 再次调用$ scope.getObjects()是一种方法。 但更简洁的方法是在成功的情况下实现模型的更新。 如果服务器响应是错误,您还应该提供错误方法。
如果您已将集合正确绑定到视图,我应该在删除后更新。 告诉我它是否帮助了你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.