在控制器中访问UI路由器解析

Question

我继续发现很棒的ui路由器。 我现在专注于resolve()函数。 我有一个基本的$state ，在这里我从后端解析一个query（）。

$stateProvider
    .state('baseApp', {
      url: '/app',
      abstract: false,
      templateUrl: 'app/layout/baseApp.html',
      authenticate: true,
      resolve: {
        // Access API Service
        APIService: 'APIService',

        // Operators
        myObjects: function(APIService){
          // APIService is a service exposing $resource
          return APIService.myObjects.query().$promise;
        }
      }
    })
    .state('baseApp.state1', {
      url: '/state1',
      views: {
        'workspace':  {
          templateUrl: 'app/state1.html',
          controller: 'State1Ctrl',
          controllerAs: 'state1'
        }
      },
      authenticate: true
    })

我正在尝试在State1Ctrl访问myObjects ：

function State1Ctrl(myObjects) {
    ....
    console.log(myObjects);
    ....
}

我希望在控制台中看到myMobject列表打印。 可悲的是，这里是输出：

undefined

看来我无法在控制器中访问Promise。 你知道为什么吗？

Answer 1

您应该在$resource promise中获取数据，然后运行。

function State1Ctrl(myObjects) {
    ....
    cmyObjects.then(function(data){
         console.log(data)
    });
}

Answer 2

问题实际上很简单：

ui-router将解析值注入到与状态关联的控制器。

要将其放入控制器中，您应将解决方案移至子状态

$stateProvider
.state('baseApp', {
  url: '/app',
  abstract: false,
  templateUrl: 'app/layout/baseApp.html',
  authenticate: true
})
.state('baseApp.state1', {
  url: '/state1',
  views: {
    'workspace':  {
     resolve: {
        // Access API Service
        APIService: 'APIService',

        // Operators
        myObjects: function(APIService){
          // APIService is a service exposing $resource
          return APIService.myObjects.query().$promise;
        }    
      }
      templateUrl: 'app/state1.html',
      controller: 'State1Ctrl',
      controllerAs: 'state1'
    }
  },
  authenticate: true
})

编辑：在您的特定情况下，我觉得您想要的是将“父”控制器变成您的第一个状态，如下所示：

$stateProvider
.state('baseApp', {
  url: '/app',
  abstract: false,
  templateUrl: 'app/layout/baseApp.html',
  authenticate: true,
  controller: BaseAppCtrl,
  resolve: {
    // Access API Service
    APIService: 'APIService',

    // Operators
    myObjects: function(APIService){
      // APIService is a service exposing $resource
      return APIService.myObjects.query().$promise;
    }
  }
})
.state('baseApp.state1', {
  url: '/state1',
  views: {
    'workspace':  {
      templateUrl: 'app/state1.html',
      controller: 'State1Ctrl',
      controllerAs: 'state1'
    }
  },
  authenticate: true
})

您只需要将这些参数注入父控制器即可。 您可以在孩子$ scope中访问父$ scope。

在父控制器中：

function BaseAppCtrl($scope, myObjects) {
    ....
    $scope.myObjects = myObjects;
    console.log(myObjects);
    ....
}

function State1Ctrl($scope) {
    ....
    console.log($scope.myObjects);
    ....
}

在这种情况下，两个console.log都应显示该值。

您可以看到它在这个塞子上工作

希望能有所帮助。