一尘不染

基于查询参数更改,禁止重新加载基于UI路由器的视图

angularjs

更新的问题

标题中的问题仍然存在-是否有可能捕获?parameters和取消视图重载。

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

这是我的距离:

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,状态会完全重新加载,这反过来又重新请求Topic的数据。如何仅“刷新”查询参数(并在控制器中捕获该事件)却不重新加载状态(以保持数据加载)?

编辑

对于我的问题,有一个相当简单的解决方案,但我没注意到-根据有关“
Hashbang和HTML5模式”的AngularJS文档 -可以通过访问最后一个哈希,并且可以通过$location.hash()滚动启动$anchorScroll()

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

在控制器中:

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

需要延迟,因为可能尚未解析内容并且没有ID。

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


阅读 192

收藏
2020-07-04

共1个答案

一尘不染

您是否reloadOnSearch在路线定义中尝试过参数?

{
    route:'/',
    resolve: {
        templateUrl:'template.html',
        reloadOnSearch: false
    }
},
2020-07-04