javascript - 为什么 $scope 中的变量不更新？

Question

plunker中的代码。 我有两个 Controller 。在第一个 Controller 中，我的 View 中有按钮处理程序

 $scope.click = function () {
  $location.url("/some");
  console.log("clicked");
}

在处理程序中我更改了 URL。我还配置了我的 $routeProvider。

var app = angular.module('plunker', []).config( function ($routeProvider) {
  $routeProvider.when('/some', {template: " counter is {{n}}</br> <button ng-click='click()'>click to load new url but  still with \"loading cntl\"</button>", controller: "loading"})
  .when("/second",{controller: "loading"});
}); 

这里我有两条不同的路线，它们具有相同的 Controller - loading Controller 因此，在我的 URL 更改为 /some 后，我的 View 中会出现新按钮。我在加载 Controller 中有另一个处理程序。

app.controller("loading", function ($scope,$location) {
 $scope.n= $scope.n || 0;
 console.log("at the begining n is "+ $scope.n);
 $scope.click = function click() {
 $scope.n++;
 console.log("n after++ is " + $scope.n);
 $location.url("/second");

}

}); 这里我增加了 n 变量并将 URL 更改为 /second。在我的 $routeProvider 中，我指出具有此 URL 的路由也必须具有加载 Controller 。触发按钮后，它会消失，因为 /second 路由器没有模板。我再次按下主视图上的按钮，我的loadingcontroller再次执行，但n变量仍然是0。为什么n的值不是 1 吗？ 我知道我的解释很困惑，但我的代码在 plunker 中

Answer 1

您正在实例化一个具有新作用域的新 Controller (因此是一个新变量n)。您需要将迭代数据保存在更持久的东西中，例如父作用域、服务、本地存储等(取决于您需要数据的目的)。

这是一个使用 $rootScope 的工作示例，以便您可以看到(您可能应该在最终代码中使用 $rootScope 之外的其他内容):http://plnkr.co/edit/HETROBPwa6VyjX83Eev0?p=preview

我在 Controller 中添加了一个简单的 console.log('scope', $scope);，因此您可以看到每次更改 url 时都会创建一个新范围。