Angular-ui.router:更新URL而不刷新视图

Question

我有一个Angular SPA,根据一些餐馆数据的不同削减,提供各种推荐列表和谷歌地图,(见m.amsterdamfoodie.nl).我希望这些列表中的每一个都有自己的URL.为了让Google抓取不同的列表,我使用了<a>用于offcan数据导航的标签.

目前,<a>标签会导致视图刷新,这对于地图非常明显.

• 我可以使用ng-click和阻止这种情况$event.preventDefault()(参见下面的代码片段),但是我需要实现一种更新浏览器URL的方法.
• 但是在尝试Angular $state或浏览器时history.pushstate,我最终会触发状态更改和视图刷新......!

因此,我的问题是如何更新模型和URL,但不刷新视图？ (另请参阅Angular/UI-Router - 如何在不刷新所有内容的情况下更新URL？)

我已经尝试了很多方法,目前有这个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更新.我不明白为什么会发生这种情况.

Answer 1

如果我理解正确的话,这是一个例子:

$state.go('my.state', {id:data.id}, {notify:false, reload:false});
//And to remove the id from the url:
$state.go('my.state', {id:undefined}, {notify:false, reload:false});

来自用户l-liava-l的问题https://github.com/angular-ui/ui-router/issues/64

您可以在$state此处查看API:http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$ state

Answer 2

根据我们之前的讨论,我想给你一些想法,如何在UI-Router这里使用.我相信,我理解你的挑战......有一个有效的例子.如果这不是完全套房,请把它作为一些灵感

免责声明:有了一个傻瓜,我无法做到这一点:http://m.amsterdamfoodie.nl/,但原则应该在那个例子类似

所以,有一个状态定义(我们只有两个状态)

  $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',
            controller: 'MapCtrl',
          },
          'list' : {
            templateUrl: 'tpl.list.html',
            controller: 'ListCtrl',
          },
        },
      })
}];

这将是我们的主要 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 ',例如'right@main'

子视图也会main.criteria注入布局视图.

它的url以一个符号^(url : '^/criteria/:criteria/:value')开头,它允许使用/斜线为主,而不是为子的斜线

而且还有控制器,他们在这里有点天真,但他们应该表明,在后台可能是真正的数据加载(基于标准).

这里最重要的是,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为我们提供的功能:

• 绝对路线(^)
• 仅按视图层次结构的范围继承
• 查看名称 - 相对名称与绝对名称

检查上述提取这里,在工作示例

扩展:这里有新的plunker

如果我们不想要重新创建地图视图,我们可以省略该子状态def:

.state('main.criteria', {
    url: '^/criteria/:criteria/:value',
    views: {
      // 'map' : {
      //  templateUrl: 'tpl.map.html',
      //  controller: 'MapCtrl',
      //},
      'list' : {
        templateUrl: 'tpl.list.html',
        controller: 'ListCtrl',
      },
    },
  })

现在我们的地图VIEW将只接收模型中的变化(可以观看),但视图和控制器不会被重新渲染

另外,还有另一个使用该插件的探测器http://plnkr.co/edit/y0GzHv?p=previewcontrollerAs

.state('main', {
    url: '/',
    views: {
      '@' : {
        templateUrl: 'tpl.layout.html',
        controller: 'MainCtrl',
        controllerAs: 'main',        // here
      },
      ...
    },
  })
.state('main.criteria', {
    url: '^/criteria/:criteria/:value',
    views: {
      'list' : {
        templateUrl: 'tpl.list.html',
        controller: 'ListCtrl',
        controllerAs: 'list',      // here
      },
    },
  })

这可以像这样使用:

<h4>{{main.hello()}}</h4>
<h4>{{list.hello()}}</h4>

最后一个吸烟者在这里