javascript - 使用 ui 路由器访问父作用域变量

Question

我目前使用的 ui router 如下:-

$stateProvider
    .state('login', {
    url: '/login'
    , resolve: loadSequence(
        'base')
    , templateUrl: 'app/shared/main/login-main.html'
    , controller: 'mainController'
    , abstract: true
})
    .state('login.signin', {
    url: '/signin'
    , resolve: loadSequence(
        'login-items'
        , 'spin'
        , 'ladda'
        , 'angular-ladda'
        , '_loginController'
        )
    , templateUrl: "app/components/login/login_login.html"
    , controller: 'loginController'
});

现在在 loginController 中，我希望能够访问 mainController 中的函数。

我当前的实现是否可行:-

angular.module('app').controller('mainController', function($scope, $state) {
  $scope.showWarning= function(){
      //show warning
  }
});

angular.module('app').controller('loginController', function($scope, $state) {
  // I want to access $scope.showWarninghere;
});

Answer 1

将 getData() 方法提取到服务中，然后您可以将它注入(inject)到两个 Controller 中:

angular.module('app').factory('dataService', function () {
    return {
        getData: function() { ... }
    }
});

angular.module('app').controller('mainController', function($scope, $state, dataService) {
  // You probably don't need to put this into your scope, but if you do:
  $scope.getData = dataService.getData.bind(dataService);
});

angular.module('app').controller('loginController', function($scope, $state, dataService) {
  dataService.getData(); 
});

请记住，范围和 Controller 是在您在状态之间导航时创建和销毁的，因此任何真正想要存在于多个状态中的东西都确实希望存储在服务中。