我有一个Angular SPA，提供各种推荐列表，以及Google Map of locations，根据不同的餐厅数据削减(见
m.amsterdamfoodie.nl)。我希望这些列表中的每一个都有自己的URL。为了让Google抓取不同的列表，我使用< a>
标题为offcanvas导航。
目前，< a>标签导致视图刷新，这是非常显着的地图。
>我可以使用ng-click和$ event.preventDefault()(参见下面的代码片段)来防止这种情况，但是我需要实现更新浏览器URL的方法。
>但是在尝试Angular的$状态或浏览器的history.pushstate时，我最终会触发状态更改和视图刷新…！
因此，我的问题是如何更新模型和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更新。我不明白为什么这是发生的。
@H_
301_23@
根据我们以前的讨论，我想给你一些想法，如何在这里使用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 (^)
> Scope Inheritance by View Hierarchy Only
> View Names – Relative vs. Absolute Names
检查上述提取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
