Angular UI 路由器 - 嵌套视图的控制器会自动成为父视图控制器的子级吗？

Question

这是我的 UI- 路由器配置。我有一个主要产品视图和下面的两个嵌套状态。我希望每个嵌套视图都有自己的控制器，但我也希望能够从父控制器 (productsCtrl) 继承一些基本信息。我的假设是我可以从 productShowCtrl 访问 productsCtrl，但它一直返回为未定义。 productsCtrl和productShowCtrl默认没有父子关系吗？

var myProducts = angular.module('Products', [
  'ProductsShow'
])
  .config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('store.products', {
        url: '/products',
        views: {
          'subhead@': {
            templateUrl:'products/list/subhead.tmpl.html'
          },
          'content@': {
            templateUrl:'products/list/list.tmpl.html',
            controller: 'ProductsCtrl as productsCtrl'
          }
        }
    })
    .state('store.products.create', {
      url: '/create',
      views: {
        'subhead@': {
          templateUrl: 'products/create/subhead.tmpl.html'
        },
        'content@': {
          templateUrl: 'products/create/create.tmpl.html'
        }
      }
    })
    .state('store.products.show', {
      url: '/:productId',
      views: {
        'subhead@': {
          templateUrl: 'products/show/subhead.tmpl.html'
        },
        'content@': {
          templateUrl: 'products/create/create.tmpl.html',
          controller: 'ProductShowCtrl as productShowCtrl',
        }
      }
    });
  });

ProductsCtrl（主要产品视图）：

myProducts.controller('ProductsCtrl', function($stateParams) {
    var productsCtrl = this;
    productsCtrl.parentTest = "PARENT";
});

ProductsShowCtrl（子视图）：

angular.module('ProductsShow', [])
  .controller('ProductShowCtrl', function($stateParams) {
      var productShowCtrl = this;
      productShowCtrl.childTest = "CHILD";

      console.log('parent: ', productsCtrl.parentTest);
  });

我无法从 ProductShowCtrl 访问 productsCtrl.parentTest。我怎样才能访问它？

Answer 1

$scope 不是那样工作的。默认情况下，他们没有您要求的父子关系。您可以在 angular api 文档中阅读更多相关信息。 $rootScope 有，但在我看来这仍然是不好的做法。

在 angular 中，当您想在两个不同的控制器中访问一个变量时，您应该做什么，就像您尝试的那样，您应该创建一个服务（工厂）来做到这一点。

也许您应该有一个产品服务，您可以在其中声明变量和函数以访问控制器中的这些变量。

Answer 2

请注意，来自 ui-路由器 official 文档

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).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

所以你不能用上面的方式拥有作用域变量。如果您想跨州共享数据，您可以通过以下方式进行：

1).任何时候您需要跨状态共享数据，您都需要 创建一个 service/factory，您可以在与这些状态关联的控制器中实例化它。工厂将由基本的 getter 和 setter 组成，用于您需要共享的不同数据。就像当您在 java 中创建 uild 吸气剂和 setter 以在类.

中共享时一样

演示：使用这种方法plunker。

2).您可以使用 $rootScope 设置一个 全局变量。由于它是全球性的，因此可以在任何地方访问，我强烈建议您不要这样做，但无论如何我都会向您指出。

3)。当一个状态是 "active" 时——它的所有祖先状态都是隐式激活的，因为 well.So 你可以 build 你的状态考虑到父子关系 并以分层方式跨范围共享数据。

演示：使用上述方法plunker。

Answer 3

有相关问答：

How do I share $scope data between states in angularjs ui-router?

我创造了special working plunker

此处使用 controllerAs 的示例可能是这样的：

状态定义：

 .state("main", {
      controller:'mainController',
      controllerAs:'mainCtrl',
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'childController',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'childController',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })

主控制器将定义Model:

app.controller('mainController', function ($scope) {
  var Model = {Name : "xxx"}; // controller property Model
})

在 form_1 或 form_2 中，我们可以使用 controllerAs 语法：

<div>
  <h5>Child state FORM 2</h5>
  <pre>{{mainCtrl.Model}}</pre>

  Change the value in a child state FROM 2
  <input ng-model="mainCtrl.Model.Name" />
</div>

其中 mainCtrl.Model 表示对父控制器的引用 （在我们及其 $scope 内）

检查一下here

Angular UI 路由器 - 嵌套视图的控制器会自动成为父视图控制器的子级吗？

Angular UI router - does a nested view's controller automatically become a child of the parent view's controller?

javascript

inheritance

state

angularjs

angular-ui-router