angularjs – 基于ui-router的查询重新加载查询参数更改

前端之家收集整理的这篇文章主要介绍了angularjs – 基于ui-router的查询重新加载查询参数更改前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
更新问题

标题中的问题仍然存在 – 是否可以捕获?参数并取消视图重新加载.

原来的问题:
我需要为我的应用程序添加锚点支持(锚点到主题).

这是我有多远:

  1. angular.module('app.topics',[
  2. 'ui.state','ui.router','restangular'
  3. 'app.topics.controllers'
  4. ])
  5. .config(function config($stateProvider) {
  6. $stateProvider.state('viewtopic',{
  7. url: '/topics/:slug?section',onEnter: function($stateParams) {
  8. // Works,as state has been reloaded.
  9. console.log('$stateParams',$stateParams);
  10. },resolve: {
  11. topic: function ($stateParams,Topic) {
  12. // Wrapper around Restangular. Returns promise.
  13. return new Topic().get($stateParams.slug);
  14. }
  15. },views: {
  16. 'main': {
  17. controller: 'TopicCtrl',templateUrl: 'topics/templates/details.tpl.html'
  18. },'sidebar': {
  19. controller: 'SidebarCtrl',templateUrl: 'topics/templates/sidebar.tpl.html'
  20. }
  21. }
  22. });
  23. });
  24.  
  25. angular.module('app.topics.controllers',[])
  26. .controller('TopicCtrl',function ($scope,topic,$rootScope,$location,$anchorScroll,$stateParams) {
  27. $scope.topic = topic;
  28. $scope.slug = $stateParams.slug;
  29. $scope.section = $stateParams.section;
  30. // ..
  31.  
  32. $scope.$watch('$stateParams.section',function (newValue,newValue) {
  33. // Does not work.
  34. console.log('stateParams.section changed',newValue,newValue);
  35. });
  36. });

我的根本问题是当我点击链接#/ topics / slug-name?section = section-1,状态被完全重新加载,然后重新请求Topic的数据.如何才能“刷新”查询参数(并在控制器中捕获该事件),但是不要重新加载状态(保持数据加载)?

编辑

对于我的问题,有一个相当简单的解决方案,我没有注意到 –
每个AngularJS documentation在“Hashbang和HTML5模式” – 最后一个哈希可以通过$location.hash()访问,滚动可以由$anchorScroll()发起,

所以我目前的解决方案是:

在控制器中:

  1. $scope.$watch('$location.hash',function () {
  2. _.defer($anchorScroll);
  3. });

需要延迟,因为内容可能尚未被解析,并且没有id.

在模板中,我只需要将目标设置为#/ topics / slug-name#section-name.

你在路由定义中尝试过reloadOnSearch参数吗?
  1. {
  2. route:'/',resolve: {
  3. templateUrl:'template.html',reloadOnSearch: false
  4. }
  5. },

猜你在找的Angularjs相关文章