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

问题描述

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

Here's my UI-Router configuration. I have a main products view and two nested states underneath that. I want each nested view to have its own controller, but I also want to be able to inherit some basic information from the parent controller (productsCtrl). My assumption would be that I could access productsCtrl from productShowCtrl, but it keeps coming back as undefined. Do productsCtrl and productShowCtrl not have a parent-child relationship by default?

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(用于主产品视图):

ProductsCtrl (for the main products view):

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

ProductsShowCtrl(用于子视图):

ProductsShowCtrl (for the child view):

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

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

我无法从ProductShowCtrl访问productsCtrl.parentTest.我该如何访问?

I can't access productsCtrl.parentTest from ProductShowCtrl. How can I access it?

推荐答案

有相关的Q&答:

There are related Q & A:

• ui路由器-具有共享控制器的嵌套视图
• 如何在angularjs ui路由器的状态之间共享$ scope数据?

• ui router - nested views with shared controller
• How do I share $scope data between states in angularjs ui-router?

我创建了特殊工作的矮人

此处带有 controllerAs 的示例可能像这样:

The example here with controllerAs could be like this:

状态定义:

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

Main controller will define the Model:

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

在 form_1 或 form_2 中，我们可以使用 controllerAs 语法访问该模型:

And in form_1 or form_2 we can access that model with controllerAs syntax:

<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内部)

在此处

这篇关于Angular UI路由器-嵌套视图的控制器会自动成为父视图的控制器的子代吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！