Angular UI 路由器 - 嵌套视图的控制器是否会自动成为父视图控制器的子级? [英] Angular UI router - does a nested view's controller automatically become a child of the parent view's controller?

问题描述

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

var myProducts = angular.module('Products', ['产品展示']).config(function($stateProvider, $urlRouterProvider){$stateProvider.state('store.products', {网址:'/产品'，意见:{'副标题@':{templateUrl:'products/list/subhead.tmpl.html'},'内容@': {templateUrl:'products/list/list.tmpl.html',控制器:'ProductsCtrl 作为 productsCtrl'}}}).state('store.products.create', {网址:'/创建'，意见:{'副标题@':{templateUrl: 'products/create/subhead.tmpl.html'},'内容@': {templateUrl: 'products/create/create.tmpl.html'}}}).state('store.products.show', {url: '/:productId',意见:{'副标题@':{templateUrl: 'products/show/subhead.tmpl.html'},'内容@': {templateUrl: 'products/create/create.tmpl.html',控制器: 'ProductShowCtrl 作为 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 = "孩子";console.log('parent: ', productsCtrl.parentTest);});

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

解决方案

有相关Q&答:

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

我创建了特殊的工作plunker

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

状态定义:

 .state("main", {控制器:'mainController'，controllerAs:'mainCtrl',网址:"/main",templateUrl: "main_init.html"}).state("main.1", {控制器:'childController'，父母:'主要'，网址:"/1",模板网址:'form_1.html'}).state("main.2", {控制器:'childController'，父母:'主要'，网址:/2"，模板网址:'form_2.html'})

主控制器将定义Model:

app.controller('mainController', function ($scope) {无功模型= {名称:xxx"}；//控制器属性模型})

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

<h5>儿童状态FORM 2</h5><pre>{{mainCtrl.Model}}</pre>更改子状态中的值 FROM 2<input ng-model="mainCtrl.Model.Name"/>

其中 mainCtrl.Model 表示对父控制器的引用(在我们的范围内)

在这里

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 (for the main products view):

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

ProductsShowCtrl (for the child view):

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

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

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

解决方案

There are related Q & A:

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

I created special working plunker

The example here with controllerAs could be like this:

The state defintion:

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

Main controller will define the Model:

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

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>

Where mainCtrl.Model represents the reference to parent controller (inside of our and its $scope)

Check it here

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