javascript - 变量更改在我的 $scope 函数中不可见

Question

当状态更改事件发生时，即使我看到该变量已在事件监听器中更新，我仍遇到未更新到 $scope 函数的变量问题。

代码如下:

angular.module('testapp')
.controller('AnotherCtrl',
['$scope', '$rootScope', '$state',
    function ($scope, $rootScope, $state) {
        'use strict';
        console.log("Init prevState.");
        var prevState = 'null_state';
        $scope.state = prevState;


        $rootScope.$on('$stateChangeError',
            function (event, toState, toParams, fromState, fromParams, error) {
                console.log("Error");
                if (toState.name === 'anotherState') {

                    console.log("Old State:" + prevState);
                    prevState = fromState.name;
                    console.log("New State:" + prevState);


                }
            })

        $rootScope.$on('$stateChangeSuccess',
            function (event, toState, toParams, fromState, fromParams) {
                console.log("Success");
                if (toState.name === 'anotherState') {

                    console.log("Old State:" + prevState);
                    prevState = fromState.name;
                    console.log("New State:" + prevState);

                }
            })


        $scope.goBack = function () {
            //$scope.state = 'anotherState';
            console.log("goBack:" + prevState);
            $state.transitionTo(prevState, {arg: 'Robert'});
        };
    }]);

这是 HTML 模板:

<div>
<h1>Another view</h1>
<br>
<br>
State:  <span ng-model="state">{{state}}</span>
<br>
<br>
<button ng-click="goBack()">Back</button>
</div>

这是控制台输出:

因此，当我在调用函数 goBack() 的按钮上按下按钮时，prevState 变量仍然是 'null_state'。

谁能解释一下是什么问题？

更新 在查看答案后我已经审查并测试了所有建议的解决方案。 AFAICS 的核心问题与不可变的字符串类型无关。正如我所见，最好的答案来自@Khanh TO。最初创建 Controller 时，事件监听器并未初始化。这是通过 Bootstrap (angular.module.run) 修复的。此外，每次加载状态/ View 时都会重新初始化 Controller ，从而导致重新初始化变量 prevState，因此监听器函数和 goBack() 函数使用不同的外部 prevState 变量。将 prevState 存储在 rootScope 上解决了这个问题。

Answer 1

根本原因是每当你改变状态时， Angular 重新初始化与当前状态关联的 Controller ，导致你以前存储的状态被清除并重新-初始化。

因此，解决方案是将之前的状态存储在共享服务中。在这种情况下，我们可以只使用 $rootScope。

$rootScope.$on('$stateChangeError',
            function (event, toState, toParams, fromState, fromParams, error) {
                console.log("Error");
                if (toState.name === 'anotherState') {
                    $rootScope.prevState = fromState.name;
                }
 });

 $rootScope.$on('$stateChangeSuccess',
            function (event, toState, toParams, fromState, fromParams) {
                console.log("Success");
                if (toState.name === 'anotherState') {
                    $rootScope.prevState = fromState.name;
                }
  });

  $scope.goBack = function () {
    $state.transitionTo($rootScope.prevState, {arg: 'Robert'});
    //or $state.transitionTo($scope.prevState, {arg: 'Robert'}); //due to scope inheritance
  };

但您的代码存在一个严重的问题，即每当 AnotherCtrl 重新初始化 时，就会向 $rootScope 注册越来越多的事件处理程序。您的代码的第二个问题是 $stateChangeSuccess 事件在第一次加载页面时不会触发 https://github.com/angular-ui/ui-router/issues/299

您应该只在 .run block 中注册一次事件处理程序:

angular.module('testapp')
       .run(["$rootScope",function ($rootScope){
                $rootScope.$on('$stateChangeError',
                   function (event, toState, toParams, fromState, fromParams, error) {
                      console.log("Error");
                      if (toState.name === 'anotherState') {
                        $rootScope.prevState = fromState.name;
                      }
                   });

               $rootScope.$on('$stateChangeSuccess',
                  function (event, toState, toParams, fromState, fromParams) {
                    console.log("Success");
                    if (toState.name === 'anotherState') {
                        $rootScope.prevState = fromState.name;
                    }
                });  
            }]);

只有这段代码应该保留在你的 Controller 中:

$scope.goBack = function () {
    $state.transitionTo($rootScope.prevState, {arg: 'Robert'});
    //or $state.transitionTo($scope.prevState, {arg: 'Robert'}); //due to scope inheritance
 };