javascript - 将 "resolve"放在 Angular-ui-router View 上不起作用 - 页面根本无法渲染

Question

$stateProvider

.state('root', {
  url: '',
  views: {
    'root.base': { templateUrl: '/templates/root/root.html' },
    'root.sidebar': {
      templateUrl: '/templates/root/root-sidebar.html',
      controller: 'SomeDataController',
      resolve: {
        someData: function(DataService) { // DataService is an angular service for data retrieval
          return DataService.getDataList(); // returns an array
        }
      },
    }
  }
});

如果我尝试使用 angular-ui-router 在 subview 上运行解析，页面就会显示为空白。如果我省略解析，它会加载得很好 - 但我需要在实例化 Controller 之前解析一些数据。我的语法正确吗？我搜索了很多例子，但似乎找不到任何符合我情况的例子。

鉴于我上面的示例，“root-sidebar.html”不应该具有“SomeDataController”的范围，并且 SomeDataController 不应该在上面声明的路由定义中解析数据吗？

Answer 1

你的概念是有效的，也许只是一些小设置被破坏了......我创建了working plunker

这是消耗一些数据的 Controller

  .controller('SomeDataController', function($scope, someData) {
    $scope.data = someData
  })

这是我们的服务加载一些JSON并将其作为异步返回:

  .factory('DataService', ['$http',
    function($http) {
      return {
        getDataList: function() {
          return $http
            .get("data.json")
            .then(function(response) {
              return response.data;
            });
        },
      };
    }
  ]);

state 定义未更改(只是调整以显示数据):

  $stateProvider
    .state('root', {
      url: '',
      views: {
        'root.base': {
          template: '<div>root base view</div>',
        },
        'root.sidebar': {
          template: '<div>root sidebar view' +
            '<h5>the resolve data</h5>' +
            '<pre>{{data | json}}</pre>' +
            '</div>',
          controller: 'SomeDataController',
          resolve: {
            someData: function(DataService) { // DataService is an angular service for data retrieval
              return DataService.getDataList(); // returns an array
            }
          },
        }
      }
    });

您可以测试所有 here