AngularJS $location 不改变路径

Question

我在提交表单后更改页面的 URL 时遇到问题。

这是我的应用程序的流程：

1. 路由已设置，URL 被识别为某个表单页面。
2. 页面加载、控制器设置变量、指令被触发。
3. 触发了一个特殊的表单指令，该指令使用 AJAX 执行特殊的表单提交。
4. 执行 AJAX 后（Angular 不处理 AJAX），然后触发回调，指令调用设置位置的 $scope.onAfterSubmit 函数。

问题是设置位置后什么都没有发生。我也尝试将位置参数设置为/...不。我也试过不提交表格。没有任何效果。

我已经测试过代码是否到达onAfterSubmit 函数（确实如此）。

我唯一的想法是函数的范围以某种方式发生了变化（因为它是从指令中调用的），但是如果范围发生变化，它又如何调用onAfterSubmit？

这是我的代码

var Ctrl = function($scope, $location, $http) {
  $http.get('/resources/' + $params.id + '/edit.json').success(function(data) {
    $scope.resource = data;
  });

  $scope.onAfterSubmit = function() {
    $location.path('/').replace();
  };
}
Ctrl.$inject = ['$scope','$location','$http'];

有人可以帮帮我吗？

Answer 1

几天前我遇到了类似的问题。在我的情况下，问题是我用 3rd 方库（准确地说是 jQuery）改变了一些东西，在这种情况下，即使调用函数和设置变量工作 Angular 并不总是认识到有变化，因此它永远不会消化。

$apply() 用于从 Angular 框架外部执行 Angular 表达式。 （例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库）。

尝试在更改位置后立即使用 $scope.$apply() 并调用 replace() 让 Angular 知道事情发生了变化。

Answer 2

我没有使用$location.path(...) 来更改或刷新页面，而是使用了$window 服务。在 Angular 中，此服务用作window 对象的接口，window 对象包含一个属性location，它使您能够处理与位置或 URL 相关的操作。

例如，使用window.location，您可以分配一个新页面，如下所示：

$window.location.assign('/');

或者刷新一下，像这样：

$window.location.reload();

它对我有用。它与您的预期略有不同，但适用于给定的目标。

Answer 3

我遇到了同样的问题，但我对 $location 的调用已经在摘要中。调用 $apply() 只是给出了一个 $digest already in process 错误。

这个技巧奏效了（并确保将$location 注入您的控制器）：

$timeout(function(){ 
   $location...
},1);

虽然不知道为什么这是必要的......

Answer 4

我必须像这样嵌入我的$location.path() 语句，因为我的摘要仍在运行：

       function routeMe(data) {                
            var waitForRender = function () {
                if ($http.pendingRequests.length > 0) {
                    $timeout(waitForRender);
                } else {
                    $location.path(data);
                }
            };
            $timeout(waitForRender);
        }

Answer 5

就我而言，问题是我的模板配置中缺少可选参数指示符（'?'）。

例如：

.when('/abc/:id?', {
    templateUrl: 'views/abc.html',
    controller: 'abcControl'
})


$location.path('/abc');

如果没有询问字符，路由显然不会改变抑制路由参数。

Answer 6

如果你们中的任何人使用 Angular-ui / ui-router，请使用：$state.go('yourstate') 而不是 $location。它对我有用。

Answer 7

这对我有用（在 CoffeeScript 中）

 $location.path '/url/path'
 $scope.$apply() if (!$scope.$$phase)

Answer 8

在我看来，这里的许多答案似乎有点老套（例如 $apply() 或 $timeout），因为搞乱 $apply() 会导致不必要的错误。

通常，当 $location 不起作用时，这意味着某些东西没有以角度方式实现。

在这个特定的问题中，问题似乎出在非角度 AJAX 部分。我有一个类似的问题，使用 $location 的重定向应该在承诺解决后进行。我想在这个例子中说明问题。

旧代码：

taskService.createTask(data).then(function(code){
            $location.path("task/" + code);
        }, function(error){});

注意：taskService.createTask 返回一个承诺。

$q - 使用 Promise 的角度方式：

let dataPromises = [taskService.createTask(data)];
        $q.all(dataPromises).then(function(response) {
                let code = response[0];
                $location.path("task/" + code);
            }, 
            function(error){});

使用 $q 解决 promise 解决了重定向问题。

更多关于 $q 服务：https://docs.angularjs.org/api/ng/service/$q

Answer 9

setTimeout(function() { $location.path("/abc"); },0);

它应该可以解决您的问题。