Question

我有一个Angular SPA，根据一些餐馆数据的不同削减，提供各种推荐列表和Google地图位置（请参阅m.amsterdamfoodie.nl）。我希望这些列表中的每一个都有自己的URL。为了让Google抓取不同的列表，我使用<a>标签进行了扫描导航。

目前，<a>标记会导致视图刷新，这对地图非常明显。

我可以使用ng-click和$event.preventDefault()阻止此操作（请参阅下面的代码段），但我需要实现更新浏览器网址的方法。
但是在尝试Angular的$state或浏览器的history.pushstate时，我最终会触发状态更改并恢复视图...！

我的问题是如何更新模型和网址，但不刷新视图？（另请参阅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。我不明白为什么会发生这种情况。

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});

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

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

Answer 2

根据我们之前的讨论，我想在这里给你一些想法，如何使用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',
            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 : '^/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为我们提供的功能：

在here

中查看以上摘录the working example

扩展：新的plunker here

如果我们不想重新创建地图视图，我们可以省略那个子状态def：

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

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

另外，还有另一个使用controllerAs

的plunker http://plnkr.co/edit/y0GzHv?p=preview

.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>

最后一个吸毒者是here

Answer 3

您可以使用范围继承更新网址而不刷新视图

$stateProvider
            .state('itemList', {
                url: '/itemlist',
                templateUrl: 'Scripts/app/item/ItemListTemplate.html',
                controller: 'ItemListController as itemList'
                //abstract: true //abstract maybe?
            }).state('itemList.itemDetail', {
                url: '/:itemName/:itemID',
                templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',
                controller: 'ItemDetailController as itemDetail',
                resolve: {
                    'CurrentItemID': ['$stateParams',function ($stateParams) {
                        return $stateParams['itemID'];
                    }]
                }
            })

如果子视图在父视图中，则两个控制器共享相同的范围。因此，您可以在父视图中放置一个虚拟（或必要的）ui视图，该视图将由子视图填充。

并插入

$scope.loadChildData = function(itemID){..blabla..};

父控制器中的

函数将由控制器负载上的子控制器调用。所以当用户点击

时

<a ui-sref="childState({itemID: 12})">bla</a>

将仅刷新子控制器和子视图。然后你可以用必要的参数调用父范围函数。

Answer 4

简短的回答结果是不将地图放入更改的视图中。接受的答案提供了有关如何使用子视图构建页面的更多细节，但关键点不是使地图成为视图的一部分，而是将其行为连接到确实发生变化并使用Controller的视图更新市场图标。

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

4 个答案: