javascript AngularJS $location.path() 不重新加载目标视图的数据
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31056868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS $location.path() not reloading data of the destination view
提问by Sylver
In my angular project, when changing the path with $location.path('/foobar')
the destination view is displayed but the data aren't reloaded (typically after saving an item and going back to the list, the list is not updated).
在我的 angular 项目中,当$location.path('/foobar')
显示使用目标视图更改路径时,但不会重新加载数据(通常在保存项目并返回列表后,列表不会更新)。
I tried to add $route.reload()
or $scope.apply()
, but nothing change.
我试图添加$route.reload()
or $scope.apply()
,但没有任何改变。
I don't know what's wrong or missing to make this work.
我不知道做这项工作有什么问题或遗漏了什么。
UPDATE
更新
$location.url()
doesnt' work either- I'm using angular 1.2.26
$location.url()
也不行- 我正在使用角 1.2.26
UPDATE 2 - ANSWER
更新 2 - 答案
Ok, after a lot of comments and answers, I think it's time to end this.
I didn't think it would have been a so complicated question.
好了,经过大量的评论和回答,我想是时候结束这一切了。
我没想到这会是一个如此复杂的问题。
So, my conclusion, giving all you said is :
所以,我的结论是,给出你所说的一切:
- Giving simple example of @yvesmancera, the default behavior of the controller is to reload itself
- In a complex controller with a resource factory and some REST calls, any save or update action should also manually update the list reference, or trigger a full reload of the list
- 以@yvesmancera 为例,控制器的默认行为是重新加载自身
- 在具有资源工厂和一些 REST 调用的复杂控制器中,任何保存或更新操作也应手动更新列表引用,或触发列表的完全重新加载
All of you gave me some good advices, so thank you.
大家给了我一些好的建议,谢谢。
采纳答案by Sudhansu Choudhary
Pseudo Code:-
伪代码:-
app.controller('myController', ['$scope', '$location','$http', 'ItemListService'
function($scope, $location, $http, ItemListService){
$scope.data = function(){
ItemListService.getAllItems(); //get all the items;
};
$scope.saveMethod = function(item){
$scope.data = ItemListService.save(item); //this is the refresh part, return data through save method. Pull the latest data and bind it to the scope.
$location.path('/fooView'); //dont think you even need this if you are entering data in a modal sorta thing, which on the same view.
}
}]);
You service should look like,
你的服务应该看起来像,
app.service('ItemListService', function(){
this.getAllItems = function(){
//get the items from itemList
//return all the items
}
this.save = function(item){
//save the item in itemList
//**return all items again, call getAllItems here too.
}
});
Hope this helps!!
希望这可以帮助!!
回答by Huy Nguyen
Use $window.location.href.
to reload the page. I just check on $location document:
使用$window.location.href.
重新加载页面。我只是检查$location 文件:
Page reload navigation
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.
页面重新加载导航
$location 服务只允许更改 URL;它不允许您重新加载页面。当您需要更改 URL 并重新加载页面或导航到其他页面时,请使用较低级别的 API,$window.location.href。
Example:
例子:
$window.location.href = "/your/path/here";
回答by yvesmancera
I had the same problem just yesterday, if you try to navigate to the same path you're already in, angular won't try to reload the view and controller. What fixed it for me is appending a "/" at the end of each route in $routeProvider, e.g:
就在昨天我遇到了同样的问题,如果您尝试导航到您已经所在的相同路径,angular 将不会尝试重新加载视图和控制器。为我修复的是在 $routeProvider 中每条路线的末尾附加一个“/”,例如:
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.when('/About/', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/Contact/', {
templateUrl: 'views/contact.html',
controller: 'ContactCtrl'
})
Edit
编辑
Here is a working plunkr with angular 1.2.26
这是一个具有 1.2.26 角度的工作 plunkr
回答by Milos Mosovsky
You can switch https://github.com/angular-ui/ui-routerit has method $state.reload() which can re-initialize whole controller.
你可以切换https://github.com/angular-ui/ui-router它有方法 $state.reload() 可以重新初始化整个控制器。
If you dont want to switch ther is problem that controller is still living but you can implement after save
如果您不想切换,则存在控制器仍然存在的问题,但您可以在保存后实施
$rootScope.$broadcast('data:updated', $scope.data);
then wrap method of loading data in controller to function and then you can push new data to existing list / or make ajax reload
然后包装在控制器中加载数据的方法以发挥作用,然后您可以将新数据推送到现有列表/或使ajax重新加载
$rootScope.$on('data:updated',function(listener,data) {
$scope.data.push(data);
});
$rootScope.$on('data:updated',function()
{
callAjax.then(function(data) {
$scope.data = data;
}
});
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on
回答by Shaohao Lin
Try $scope.dataModel.$save(); $location.url('/foobar');
Another reason might solve the problem is: when you redirect to /foobar, the controller of foobar should have a AJAX call to your server to load the new data. And you should use angular factory to make your AJAX calls.
If it is still not working, can you give more information about the version of the angular you are using, as well as your backend framework and database.
尝试$scope.dataModel.$save(); $location.url('/foobar');
另一个可能解决问题的原因是:当您重定向到 /foobar 时,foobar 的控制器应该对您的服务器进行 AJAX 调用以加载新数据。您应该使用 angular factory 来进行 AJAX 调用。
如果它仍然无法正常工作,您能否提供有关您正在使用的 angular 版本以及后端框架和数据库的更多信息。
回答by Yevhenii Bahmutskyi
$location.path("/login");
$timeout(() => $scope.$apply(), 1000);
works for me
对我来说有效