Question

我目前正在使用ui路由器，如下所示： -

$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()方法解压缩到服务中，然后将其注入两个控制器：

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

记住在状态之间导航时创建和销毁范围和控制器是很有用的，因此任何实际上想要存在于多个状态的东西确实都希望存储在服务中。

Answer 2

正如Duncan和Sanjay所说，使用服务获取数据可能确实更好，但我想我会回答原来的问题，所以你知道： < / p>

如docs所述，要激活prototypal inheritance，视图必须嵌套，而不仅仅是状态。

因此，为了使loginController能够访问mainController的范围，login-main.html模板必须使用uiView指令（例如<div ui-view></div>）将是login_login.html州的login.signin模板的占位符。

Answer 3

您可以使用angular service。

我找到了Plunker代码来解决您的问题

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

3 个答案: