加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 禁止在查询参数更改时重新加载基于ui-router的视图

发布时间:2020-12-17 07:55:42 所属栏目:安全 来源:网络整理
导读:更新的问题 标题中的问题仍然存在 – 是否可以捕获?参数并取消视图重新加载. 原始问题: 我需要为我的应用程序添加锚点支持(主题的锚点). 这是我有多远: angular.module('app.topics',[ 'ui.state','ui.router','restangular' 'app.topics.controllers']).
更新的问题

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

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

这是我有多远:

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的链接时,状态被完全重新加载,然后重新请求主题的数据.如何只是“刷新”查询参数(并在控制器中捕获该事件)但不重新加载状态(以保持数据加载)?

编辑

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

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

在控制器中:

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

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

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

您是否尝试过路由定义中的reloadOnSearch参数?
{
    route:'/',resolve: {
        templateUrl:'template.html',reloadOnSearch: false
    }
},

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读