angularjs – Angular-ui.router：更新URL,无需刷新
|
我有一个Angular SPA，提供各种推荐列表，以及Google Map of locations，根据不同的餐厅数据削减(见
m.amsterdamfoodie.nl)。我希望这些列表中的每一个都有自己的URL。为了让Google抓取不同的列表，我使用< a>标题为offcanvas导航。
目前，< a>标签导致视图刷新，这是非常显着的地图。 >我可以使用ng-click和$ event.preventDefault()(参见下面的代码片段)来防止这种情况，但是我需要实现更新浏览器URL的方法。 因此，我的问题是如何更新模型和URL，但不刷新视图？ (另见Angular/UI-Router – How Can I Update The URL Without Refreshing Everything?) 我已经尝试了很多方法，目前有这个html <a href="criteria/price/1" class="btn btn-default" ng-click="main.action($event)">Budget</a> 在控制器中： this.action = ($event) ->
$event.preventDefault()
params = $event.target.href.match(/criteria/(.*)/(.*)$/)
# seems to cause a view refresh
# history.pushState({},"page 2","criteria/"+params[1]+"/"+params[2]);
# seems to cause a view refresh
# $state.transitionTo 'criteria',{criteria:params[1],q:params[2]},{inherit:false}
updateModel(...)
而且，我认为发生的是我触发$ stateProvider代码： angular.module 'afmnewApp'
.config ($stateProvider) ->
$stateProvider
.state 'main',url: '/'
templateUrl: 'app/main/main.html'
controller: 'MainCtrl'
controllerAs: 'main'
.state 'criteria',url: '/criteria/:criteria/:q'
templateUrl: 'app/main/main.html'
controller: 'MainCtrl'
controllerAs: 'main'
一个可能的线索是，如果我加载例如下面的代码， http://afmnew.herokuapp.com/criteria/cuisine/italian然后您浏览时视图刷新，而如果我加载http://afmnew.herokuapp.com/，则不会刷新，但不会更改URL更新。我不明白为什么这是发生的。
根据我们以前的讨论，我想给你一些想法，如何在这里使用UI-Router。我相信，我明白你的挑战正确…有
a working example.如果这不完全套装，请把它作为一些灵感
免责声明：有一个朋友，我无法实现这一点：http://m.amsterdamfoodie.nl/，但原则应该在example中类似 所以，有一个状态定义(我们只有两个状态) $stateProvider
.state('main',{
url: '/',views: {
'@' : {
templateUrl: 'tpl.layout.html',controller: 'MainCtrl',},'right@main' : { templateUrl: 'tpl.right.html','map@main' : {
templateUrl: 'tpl.map.html',controller: 'MapCtrl','list@main' : {
templateUrl: 'tpl.list.html',controller: 'ListCtrl',})
.state('main.criteria',{
url: '^/criteria/:criteria/:value',views: {
'map' : {
templateUrl: 'tpl.map.html','list' : {
templateUrl: 'tpl.list.html',})
}];
这将是我们的主要tpl.layout.html <div>
<section class="main">
<section class="map">
<div ui-view="map"></div>
</section>
<section class="list">
<div ui-view="list"></div>
</section>
</section>
<section class="right">
<div ui-view="right"></div>
</section>
</div>
我们可以看到，主要状态的目标是主要状态的这些嵌套视图：’viewName @ main’，例如“正确@主” subview，main.criteria也注入布局视图。 它的url以一个符号^(url：’^ / criteria /：criteria /：value’)开头，这样可以让/ slash为主，而不是加倍的斜杠为孩子 还有控制器，他们在这里有点天真，但他们应该显示，在后台可能是真正的数据加载(基于标准)。 这里最重要的是，PARENT MainCtrl创建$ scope.Model = {}。这个属性将是(感谢继承)在父和子之间共享。这就是为什么这一切都会奏效： app.controller('MainCtrl',function($scope)
{
$scope.Model = {};
$scope.Model.data = ['Rest1','Rest2','Rest3','Rest4','Rest5'];
$scope.Model.randOrd = function (){ return (Math.round(Math.random())-0.5); };
})
.controller('ListCtrl',function($scope,$stateParams)
{
$scope.Model.list = []
$scope.Model.data
.sort( $scope.Model.randOrd )
.forEach(function(i) {$scope.Model.list.push(i + " - " + $stateParams.value || "root")})
$scope.Model.selected = $scope.Model.list[0];
$scope.Model.select = function(index){
$scope.Model.selected = $scope.Model.list[index];
}
})
这应该有一些想法，我们如何使用UI-Router为我们提供的功能： > Absolute Routes (^) 检查上述提取here，the working example 扩展：新的空档here 如果我们不想让地图视图重新创建，我们可以忽略该形式的子状态def： .state('main.criteria',{
url: '^/criteria/:criteria/:value',views: {
// 'map' : {
// templateUrl: 'tpl.map.html',// controller: 'MapCtrl',//},'list' : {
templateUrl: 'tpl.list.html',})
现在我们的地图VIEW将只接收模型中的变化(可以观看)，但视图和控制器将不会被重新呈现 另外还有另一个使用控制器Asakak的http://plnkr.co/edit/y0GzHv?p=preview .state('main',{
url: '/',views: {
'@' : {
templateUrl: 'tpl.layout.html',controllerAs: 'main',// here
},...
},})
.state('main.criteria',views: {
'list' : {
templateUrl: 'tpl.list.html',controllerAs: 'list',})
可以这样使用： <h4>{{main.hello()}}</h4>
<h4>{{list.hello()}}</h4>
最后一个坑是here （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |