禁止在查询参数更改时重新加载基于 ui-router 的视图 [英] Suppress reloading of ui-router based view on query parameter change

问题描述

更新的问题

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

Question in title still stands - is it possible to catch ?parameters and cancel view reload.

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

Original question: I need to add anchor support for my application (anchors to topics).

这是我的距离:

angular.module('app.topics', [
    'ui.state',
    'ui.router',
    'restangular'
    'app.topics.controllers'
])
.config(function config($stateProvider) {
    $stateProvider.state('viewtopic', {
        url: '/topics/:slug?section',
        onEnter: function($stateParams) {
            // Works, as state has been reloaded.
            console.log('$stateParams', $stateParams);
        },
        resolve: {
            topic: function ($stateParams, Topic) {
                // Wrapper around Restangular. Returns promise.
                return new Topic().get($stateParams.slug);
            }
        },
        views: {
            'main': {
                controller: 'TopicCtrl',
                templateUrl: 'topics/templates/details.tpl.html'
            },
            'sidebar': {
                controller: 'SidebarCtrl',
                templateUrl: 'topics/templates/sidebar.tpl.html'
            }
        }
    });
});

angular.module('app.topics.controllers', [])
    .controller('TopicCtrl', function ($scope, topic, $rootScope, $location,
                                         $anchorScroll, $stateParams) {
        $scope.topic = topic;
        $scope.slug = $stateParams.slug;
        $scope.section = $stateParams.section;
        // ..

        $scope.$watch('$stateParams.section', function (newValue, newValue) {
            // Does not work.
            console.log('stateParams.section changed', newValue, newValue);
        });
    });

我的根本问题是当我点击带有 #/topics/slug-name?section=section-1 的链接时，状态被完全重新加载，进而重新请求主题的数据.如何只刷新"查询参数(并在控制器中捕获该事件)而不重新加载状态(以保持数据加载)?

My root issue is when I click on link with #/topics/slug-name?section=section-1, state is reloaded completely, which in turn re-requests data for Topic. How can one just "refresh" query parameters (and catch that event in controller) but don't reload state (to keep data loaded)?

编辑

对于我的问题，有一个我没有注意到的相当简单的解决方案 -根据 AngularJS 文档关于Hashbang 和 HTML5"Modes" - 最后一个哈希值可以通过 $location.hash() 访问，并且可以通过 $anchorScroll()

For my issue there is a rather simple solution which I've failed to notice - per AngularJS documentation on "Hashbang and HTML5 Modes" - last hash is accessible via $location.hash() and scrolling can be initiated by $anchorScroll()

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

So my current solution is:

在控制器中:

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

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

Defer is needed because content may not be parsed yet and there are no id's.

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

In template I just had to set target to #/topics/slug-name#section-name.

推荐答案

您是否尝试过路由定义中的 reloadOnSearch 参数?

Have you tried reloadOnSearch parameter within routes definition?

{
    route:'/',
    resolve: {
        templateUrl:'template.html',
        reloadOnSearch: false
    }
},

这篇关于禁止在查询参数更改时重新加载基于 ui-router 的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！