Question

我正在尝试构建一个应用程序，在登录时使用$ 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;
      }]
    }
  })

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类似于：

// 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; }); };

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

此外，通过模板中的范围无法通过状态定义中的resolve传递“authenticated”的值。

Answer 1

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

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

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

angular-ui ui-router controller没有用$ state.go实例化

1 个答案: