Angular的$location更改路径第二次有效，第一次无效。

13 浏览
0 Comments

Angular的$location更改路径第二次有效，第一次无效。

尽管这段代码看起来很简单，但是阅读了关于$location的文档后，我发现有很多我不理解的复杂性。我的设置如下：\n

// 在app.js中
$routeProvider.when('/done'     , {templateUrl: 'partials/done.html', controller: 'DoneController'});
// 在我的控制器中，注入了$location，在按钮按下时...
if (!$scope.errors.length) {
    $scope.model.save().then(function() {
        alert("我到这里了吗？");
        $location.path('/done');
    });
}

\n我按下按钮后看到了弹窗，但是视图没有发生变化。我再次按下按钮（第二次将数据保存到云端），我再次看到了弹窗，视图也发生了变化。有什么想法吗？谢谢提前。

0

2 答案

0 Comments

可能的原因是HTML代码中的链接标签的href属性没有设置为空字符串。解决方法是将href属性设置为空字符串。

0
0 Comments

Angular中的$location路径更改在第二次运行时有效，而第一次运行时无效的问题可能是由于异步操作引起的。当使用像jQuery这样的外部库时，这种情况通常发生。问题的关键在于，angular的$watch -> $digest -> $apply循环不会对外部库的事件进行触发。因此，更改已经完成，但并没有被angularjs传播出去。使用$scope.$apply()可以解决这个问题。

if (!$scope.errors.length) {
    $scope.model.save().then(function() {
        alert("did I get here?");
        $scope.$apply(function(){
          $location.path('/done');
        });
    });
}

我同意当异步事件在Angular框架之外生成时，使用$scope.$apply是解决问题的方法，我相信他的调用$scope.model.save()就是这种情况。但是$timeout是Angular框架的一部分，你不应该在$timeout回调中使用$scope.$apply。这就是$timeout的意义所在。

$scope.model.save().then(function() {
    $timeout(function () {
        $location.path('/done');
    });
});

另一方面，你可以使用setTimeout()来说明这是最基本的异步调用，也是在框架之外的情况。

$scope.model.save().then(function() {
    setTimeout(function () {
        $location.path('/done');
    });
});

谢谢，我的model.save()最终调用了parse.com，符合你关于在框架之外的理论。我以为我已经通过在github上找到的一个项目将parse的api封装在angular的promise中，但现在调查后，我发现那段代码没有运行。感谢你的建议（也谢谢）。

以上是关于Angular $location路径在第一次运行时无效的问题的原因和解决方法。通过使用$scope.$apply()和$timeout，可以确保在异步事件中正确触发Angular的$digest循环，从而使$location路径更改生效。

0