如何在AngularJS UI Router中使用$state.go()后访问新$scope

你遇到的问题其实是因为**$state.go的then回调执行时机太早**——当then触发时，新状态的控制器还没完成初始化，$state.current.$scope还没和新状态绑定，而旧的$scope本来就是原状态的，自然无法影响新页面。下面给你几种可行的解决方案，按推荐程度排序：

1. 最规范：用状态参数（State Params）传递数据 #

这是UI-Router设计的标准状态间通信方式，完全符合框架规范，解耦性最好：

步骤1：定义状态时声明参数 #

在配置newState的时候，添加params属性：

$stateProvider.state('newState', {
  url: '/new-state',
  templateUrl: 'new-state.html',
  controller: 'NewStateCtrl',
  params: {
    // 可以设置默认值，或者允许空值
    variable: null
  }
});

步骤2：跳转时传递参数 #

// 直接把要传递的值放在第二个参数里
$state.go("newState", { variable: "abc" });

步骤3：在新状态控制器中接收参数 #

app.controller('NewStateCtrl', function($scope, $stateParams) {
  // 把参数赋值给当前scope的变量
  $scope.variable = $stateParams.variable;
});

2. 临时方案：用$timeout延迟操作 #

如果因为某些原因必须直接操作新状态的scope，可以借助$timeout让代码延迟到Angular的下一次digest cycle执行，这时新状态的scope已经初始化完成了：

$state.go("newState").then(function () {
  $timeout(function() {
    // 现在$state.current.$scope已经指向新状态的scope了
    $state.current.$scope.variable = "abc";
  });
});

⚠️ 注意：这种方式不推荐，因为它强依赖于Angular的生命周期，代码耦合度高，后续维护容易出问题。

3. 备选方案：用事件广播传递数据 #

通过$rootScope广播事件，让新状态的控制器监听事件并更新scope：

原状态跳转代码： #

$state.go("newState").then(function () {
  // 广播一个自定义事件，带上要传递的值
  $rootScope.$broadcast('updateVariable', 'abc');
});

新状态控制器代码： #

app.controller('NewStateCtrl', function($scope) {
  // 监听事件，收到后更新scope变量
  $scope.$on('updateVariable', function(event, value) {
    $scope.variable = value;
  });
});

总结一下，优先用状态参数的方式，这是最符合UI-Router设计思想的做法，其他两种只作为特殊场景的临时方案。

内容的提问来源于stack exchange，提问作者mademyday