【问题标题】:Change route parameters without updating view更改路由参数而不更新视图
【发布时间】:2013-07-31 21:25:20
【问题描述】:

我目前正试图弄清楚如何在不重新加载整个页面的情况下更改路由参数。例如,如果我从

http://www.example.com/#/page

但将名称更新为“George”,将路线更改为:

http://www.example.com/#/page/george

如果我已经路由了http://www.example.com/#/page/:name

无需重新加载位置。可以只设置 $routeParams.name = "George" 吗?

编辑: 或者,有没有办法在不重新加载或重置页面的情况下更新http://www.example.com/#/page?name=George

【问题讨论】:

    标签: angularjs routes


    【解决方案1】:

    好的,经过大量搜索。我回答了我自己的问题。

    我发现在 Angular 文档中找到任何东西是难以置信的,但有时,一旦找到它,它就会改变你对问题的看法。

    我从这里开始:http://docs.angularjs.org/api/ng.$location 这把我带到了这里:http://docs.angularjs.org/guide/dev_guide.services.$location 这让我想到了这个问题:AngularJS Paging with $location.path but no ngView reload

    我最终做了什么: 我将$location.search({name: 'George'}); 添加到我想更改名称的位置(A $scope.$watch)。

    但是,这仍然会重新加载页面,除非您执行底部 StackOverflow 链接中的操作并向传递给 $routeProvider.when 的对象添加参数。就我而言,它看起来像:$routeProvider.when('/page', {controller: 'MyCtrl', templateUrl:'path/to/template', reloadOnSearch:false})

    我希望这可以避免其他人头疼。

    【讨论】:

    • 此解决方案添加了查询参数,并且不会替换现有的 routeParams,这是您最初的问题。要替换现有的 routeParams,您可以使用 $location.path(),它是一个 getter 和 setter。
    • 有什么方法可以在不触发刷新的情况下使用$location.path()更新特定参数?
    • $location.search() 返回一个包含参数的对象,更新您想要的,然后再次将其传递给 $location.search({})。
    • hmm,这仅适用于您对路径中的 ?param 感到满意的情况,但如果您只是想要 /param,那么看起来您需要一个 hack,因为 Angular 团队似乎没有有兴趣提供不重新加载页面的功能:github.com/angular/angular.js/issues/1699
    【解决方案2】:

    我实际上找到了一个对我的应用程序来说更优雅的解决方案。

    $locationChangeSuccess 事件有点暴力的做法,但是我发现检查路径可以避免在路由路径模板不变的情况下重新加载页面,但在切换时重新加载页面到不同的路线模板:

    var lastRoute = $route.current;
    $scope.$on('$locationChangeSuccess', function (event) {
        if (lastRoute.$$route.originalPath === $route.current.$$route.originalPath) {
            $route.current = lastRoute;
        }
    });
    

    将该代码添加到特定控制器使重新加载更加智能。

    【讨论】:

      【解决方案3】:

      您可以使用 ng-show 和 ng-hide 更改页面的显示,这些转换不会重新加载页面。但我认为您要解决的问题是您希望能够为页面添加书签,能够按刷新并获得所需的页面。

      我建议实现 angular ui-router,它非常适合在不重新加载页面的情况下切换状态。唯一的缺点是您必须更改所有路线。

      Check it out here 有一个很棒的演示。

      【讨论】:

        猜你喜欢
        • 2021-09-28
        • 1970-01-01
        • 1970-01-01
        • 2017-12-07
        • 2015-10-28
        • 2021-06-03
        • 1970-01-01
        • 2016-06-07
        • 1970-01-01
        相关资源
        最近更新 更多