Angular/UI-Router - 如何在不刷新所有内容的情况下更新 URL? [英] Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?
问题描述
我是 Angular 和 ui-router 的新手.当有人选择一个模型并且我的控制器执行标准的 SHOW 方法时,我只想更新 URL 以包含模型的 ID,而不刷新页面,然后继续我的原始视图.我不知道该怎么做...
I'm new to both Angular and the ui-router. When someone selects a model and my controller performs a standard SHOW method, I simply want to update the URL to include the model's ID without refreshing the page, and continue on with my original view. I'm not sure how to do this...
$stateProvider
.state('citylist', {
url: "/",
templateUrl: "views/index.html"
})
.state('cityshow', {
url: "/city/:id",
templateUrl: "views/index.html"
})
angular.module('app.system').controller('IndexController', ['$scope', 'Global', 'Cities', '$stateParams', '$location', function ($scope, Cities, $stateParams, $location) {
$scope.loadTown = function(id) {
Cities.get({id: id }, function(city) {
$scope.city = city
// Change URL
// Do things within the same view...
});
};
});
<button ng-click="loadTown(123456)">Chicago</button>
推荐答案
您使用的代码片段与正确的 ui-router 设置相差甚远.我建议你,检查这个演示应用程序:http://angular-ui.github.io/ui-router/sample/#/contacts/1.在这里我们可以看到 List 是如何固定"的,而 Detail 是如何在没有任何页面刷新的情况下更改的.
The code snippets you've used are a bit far from the correct ui-router settings. I would suggest to you, check this demo application: http://angular-ui.github.io/ui-router/sample/#/contacts/1. Here we can see how the List is "fixed" while Detail is changed without any page refresh.
这个例子的代码在这里下载https://github.com/angular-ui/ui-router/tree/master/sample.
The code of this example download here https://github.com/angular-ui/ui-router/tree/master/sample.
什么对理解 HOW TO 有很大帮助(除了 wiki) 是这个代码片段:state.js.加载演示,通读此注释说明.而 ui-router
会有意义...
What should help a lot to understand HOW TO (except the wiki) was this code snippet: state.js. Load the demo, read through this commented explanation. And ui-router
will make sense...
这篇关于Angular/UI-Router - 如何在不刷新所有内容的情况下更新 URL?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!