AngularJS：如何在routeChangeStart事件中更改位置路径？

Question

在我的应用程序中，我使用一些查询字符串参数来解析用于预选某些数据的链接。 但是我想为用户隐藏这些参数。 例如，在我使用诸如localhost/myapp#/settings?key=dataGrid&value=10类的路由的情况下，我想清除这些参数并向用户显示诸如localhost/myapp#/settings类的路由。

我尝试过这样的事情：

angular.module('myApp')
.run(['$rootScope', '$sce', '$location', '$route',
    function($rootScope, $sce, $location, $route) {
        $rootScope.$on('$routeChangeStart', function(event, next, current) {
            if ($location.url().indexOf('?key=')) {
                var newLocationPath = $location.url().substring(
                    0, $location.url().indexOf('?key='));
                $location.path(newLocationPath).search('');
            }
        });
    }]);

但是它什么也没做。 在StackOverflow上，我发现了有关使用$rootScope.$Apply一些信息，但是如果尝试$rootScope.$Apply ，则会出现此错误： [$rootScope:inprog] $digest already in progress 。

Answer 1

尝试： $ locationChangeStart处理页面更改。 您的代码如下：

$rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl){
    $rootScope.target = $location.search()['key']; // (equivalent) key = GET[key]
    // $rootScope.target = $location.search().key; // Other solution
});

要从控制器（不使用链接）为URL设置参数，代码如下：

myApp.controller('MyCtrl',function($scope, $location) {

    // setParam('key', 'dataGrid')
    $scope.setParam = function(param, value) {
        $location.search(param, value); // domain.com/#/page?key=dataGrid
    };

});

实时示例： http ： //jsfiddle.net/Chofoteddy/3wFeR/

也就是说，您的代码如下：

$rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl){
    var param = $location.search()['key'];
    $location.path(param).search(''); // Change url and clean params
});

更多信息： $ rootScope。$ on（“ $ locationChangeStart”）