javascript - Angular ui 路由器 : Child not getting Parent state

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

我的 Controller 看起来像:

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

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

如何有效隐藏父 View 但仍访问父数据？

Answer 1

来自 ui-router 文档:

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

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

编辑: I made this fiddle解释名称。