angular-ui ui-router 控制器未使用 $state.go 实例化答案

【问题标题】：angular-ui ui-router controller not getting instantiated with $state.goangular-ui ui-router 控制器未使用 $state.go 实例化
【发布时间】：2015-06-02 13:45:37
【问题描述】：

我正在尝试构建一个应用程序，它在登录时将状态更改为具有 $state.go 的视图，但是在调用 $state.go 时，控制器没有按照为该状态定义的那样实例化。

这是我的状态更改逻辑（为简洁起见，删除其他代码）：

config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('login', {
    url: "/",
    templateUrl: "templates/login.html",
    controller: 'LoginController'
  })
  // setup an abstract state for the tabs directive
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:
  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashboardController'
      }
    },
    resolve: {
      authenticated: ['RestService', function(restService) {
        return restService.authenticationStatus();
      }],
      sessionService: ['SessionService', function(sessionService) {
        return sessionService;
      }]
    }
  })

我的 LoginController 类似于：

  // Perform the login action when the user submits the login form
  $scope.doLogin = function(loginForm) {
    if (loginForm.$invalid) {
        $log.debug('Invalid Form...', $scope.loginData);
        return;
    }
    $log.debug('Doing login', $scope.loginData);

    RestService.login($scope.loginData)
      .then(function(data) {
          $log.debug("Inside loginController...");
          $log.debug(data);
          $scope.$state.go("tab.dash");
      }, function(data) {
          $log.debug(data);
          $scope.formErrors = data.errors;
      });
  };

我的 DashboardController 类似于：

angular.module('starter.controller.dashboard', [])

.controller('DashboardController', ['$scope', '$log', '$http',
  function($scope, $log, $http) {
    $log.debug("reaching here..................");
    $log.debug($scope.authenticated);

}]);

现在，当登录成功时，状态将转换为 /tab/dash 但控制器未实例化，即 DashboardController 中的调试日志未打印。如果我直接导航到 /tab/dash，那么控制器确实会被实例化，并且我确实会看到打印的日志。

此外，通过状态定义中的解析传递的“已验证”的值不能通过模板中的范围获得。

【问题讨论】：

@JB Nizet：不，我已将“starter.controller.dashboard”添加到我的主模块的依赖项中，并且在控制台中没有看到任何错误。此外，如我的问题所述，如果我直接导航到状态，那么控制器确实会被实例化。如果依赖解析有任何错误，即使直接导航到状态，它也应该在控制台中显示错误。
authenticationStatus() 的代码是什么样的？解析必须在控制器初始化之前完成，因此问题可能出在该函数中......
@Claies：即使我将解析更改为：resolve: { authenticated: function(restService) { return true; } } 我仍然看到相同的行为。
如果您根本没有解决选项，控制器是否会初始化？
@Claies：不，即使我删除了 resolve 选项，我仍然没有看到 DashController 被初始化。

标签： angularjs angular-ui-router

【解决方案1】：

事实证明，控制器正在被实例化，但它只被实例化一次。如果我在测试时不刷新页面而只是更改路径，那么由于控制器已经实例化，它不会再次实例化。只有当我刷新页面（LoginPage）然后导航到仪表板页面（通过 $state.go 登录）时，控制器才会再次实例化。

控制器中不可用的解析数据的问题是因为我的假设是它是自动注入 $scope 但实际上并非如此。解析参数通过传递的参数显式注入控制器的构造函数，然后需要在范围内手动分配值。比如：

.controller('DashboardController', ['$rootScope', '$scope', '$log', '$ionicLoading', '$http', 'authenticated',
  function($rootScope, $scope, $log, $ionicLoading, $http, authenticated) {
    $scope.authenticated = authenticated;
}]);

【讨论】：