Question

我创建了两个json文件，我通过控制器homeCtrl和articleCtrl获取数据。比我有一个状态来显示我的所有数据位置和文章

.state('overview', {
    abstract: true,
    url: '/overview',
    templateUrl: '_/partial/overview/overview.html',
    controller: 'homeCtrl',
    resolve: {
        places: ['$http', function($http) {
             return $http.get('_/api/place.json').then(function(response) {
                 return response.data;
             })
         }] 
    }
})

.state('overview.all', {
    url: '/all',
    templateUrl: '_/partial/overview/overview-all.html',
    controller: 'homeCtrl',
    resolve: {
        places: ['$http', function($http) {
             return $http.get('_/api/place.json').then(function(response) {
                 return response.data;
             })
         }] 
    }
})

    .state('overview.articles', {
        url: '/articles',
        templateUrl: '_/partial/overview/overview-articles.html',
        controller: 'articleCtrl',
        resolve: {
            articles: ['$http', function($http) {
                 return $http.get('_/api/article.json').then(function(response) {
                     return response.data;
                 })
             }] 
        }
    })

之后我创建了两个状态来通过id

获取数据

.state('overview.detail-place', {
    url: '/:id/place',
    templateUrl: '_/partial/details/detail-place.html',
    controller: function($scope, $stateParams){
        $scope.place = $scope.places[$stateParams.id];
    }
})

.state('overview.detail-article', {
    url: '/:id/article',
    templateUrl: '_/partial/details/detail-article.html',
    controller: function($scope, $stateParams){
        $scope.article = $scope.articles[$stateParams.id];
    }
})

我去一个地方的详细页面没有问题但是当我想去看文章时我得到了这个错误，99是文章的ID。

TypeError: Cannot read property '99' of undefined
    at new $stateProvider.state.state.state.state.state.state.state.state.controller (http://localhost:8888/%203.0v/_/js/app.js:86:53)
    at d (http://localhost:8888/%203.0v/_/lib/angular.min.js:34:265)
    at Object.instantiate (http://localhost:8888/%203.0v/_/lib/angular.min.js:34:394)
    at http://localhost:8888/%203.0v/_/lib/angular.min.js:66:112
    at http://localhost:8888/%203.0v/_/lib/angular-ui-router.min.js:7:15323
    at J (http://localhost:8888/%203.0v/_/lib/angular.min.js:53:345)
    at f (http://localhost:8888/%203.0v/_/lib/angular.min.js:46:399)
    at http://localhost:8888/%203.0v/_/lib/angular.min.js:46:67
    at j (http://localhost:8888/%203.0v/_/lib/angular-ui-router.min.js:7:14566)
    at http://localhost:8888/%203.0v/_/lib/angular-ui-router.min.js:7:14835 <div class="main-container overview ng-scope" ui-view="">

Answer 1

问题在于，州'overview.articles'确实启动了 articles 集合

.state('overview.articles', {
    ...
    controller: 'articleCtrl',
    resolve: {
        articles: ....

所以最有可能'articleCtrl'确实将文章放入$ scope.articles。

但是，这个状态：'overview.detail-article'实际上无法访问该集合：

.state('overview.detail-article', {
    ...
    controller: function($scope, $stateParams){
        $scope.article = $scope.articles[$stateParams.id];
    }

为什么？ ，因为'overview.detail-article'不是'overview.articles'

的子状态

但是ui-router仍然不够，请查看：

Scope Inheritance by View Hierarchy Only （小引用:)

请记住，只有嵌套状态的视图时，范围属性才会继承状态链。范围属性的继承与状态的嵌套无关，也与视图嵌套（模板）无关。

完全有可能您有嵌套状态，其模板在您网站中的各种非嵌套位置填充ui-views。在这种情况下，您不能期望在子状态视图中访问父状态视图的范围变量。

因此，我们需要将详细信息状态作为文章的子项，并且还嵌套在父视图中：

.state('overview.articles.detail-article', { ...

一名working example ......

的掠夺者

ui-router抽象状态组合

1 个答案: