Angular ui-router：孩子没有获得父母状态

Question

我有一个使用 ui-router 的 Angular 应用程序，在我的应用程序中定义了以下状态。

$stateProvider
  .state('classes', {
    url: '/classes/:type',
    templateUrl: 'classes.html',
    controller: 'ClassesCtrl',
  })
  .state('classes.detail', {
    url: '/:id',
    views: {
        "@": {
            templateUrl: 'class.html',
            controller: 'ClassCtrl'
        }
    }
  });

我的控制器看起来像：

app.controller('ClassesCtrl', function($scope, $stateParams){
  $scope.foo = "bar";
});
app.controller('ClassCtrl', function($scope, $stateParams){
  console.log($scope.foo);
});

如您所见，class.detail 通过定位未命名的根级 ui-view 来隐藏父视图。我遇到的问题是孩子没有继承父母的范围（我无法在 class.detail 中访问 $scope.foo）。当我进入子状态时，父状态似乎被破坏了，因为如果我点击返回，它必须重新加载所有数据。

如何有效地隐藏父视图但仍然访问父数据？

Answer 1

来自 ui-router 文档：

仅限视图层次结构的范围继承

请记住，如果您的状态视图是嵌套的，则范围属性只会沿状态链继承。范围属性的继承与您的状态的嵌套无关，而与您的视图（模板）的嵌套有关。

好吧，您使用@ 来定义您的视图，但您的父状态已命名，因此您应该将其命名为@classes

编辑：我made this fiddle解释名称。