Question

首先，我使用components。

我有这个＆＃34;父母＆＃34; component：

(function() {
  'use strict';

  angular
    .module('parentModule', [])
    .component('parent', {
      templateUrl: 'parent.tpl.html',
      controller: ParentCtrl,
        transclude: true,
        bindings: {
            item: '='
        }
    });

  function ParentCtrl() {
    var vm = this;
    vm.item = {
      'id': 1,
      'name': 'test'
    };
  }
})();

我只是想与另一个组件分享object 项，如下所示：

(function() {
  'use strict';

  angular
    .module('childModule', [])
    .component('child', {
      templateUrl: 'child.tpl.html',
      controller: ChildCtrl,
      require: {
        parent: '^item'
      }
    });

  function ChildCtrl() {
    console.log(this.parent)
    var vm = this;

  }
})();

查看（家长）：

Parent Component:

<h1 ng-bind='$ctrl.item.name'></h1>
<child></child>

查看（儿童）：

Child component:

Here I want to print the test that is in the parent component
<h2 ng-bind='$ctrl.item.name'></h2>

实际上我收到以下错误：

表达式＆＃39; undefined＆＃39;在属性＆＃39;项目＆＃39;与指令一起使用＆＃39;父＆＃39;是不可转让的！

这里有DEMO以更好地说明情况

你能告诉我如何才能使它发挥作用吗？

Answer 1

您需要从父组件中删除bindings。 bindings绑定到组件控制器，如scope绑定到指令的范围。你没有将任何内容传递给<parent></parent>所以你必须删除它。

然后您的子组件require是父组件，而不是项目。所以

  require: {
    parent: '^parent'
  }

当然，子模板应修改为：

<h2 ng-bind='$ctrl.parent.item.name'></h2>

最后，如果要从子控制器中记录父项内的项，则必须写：

  function ChildCtrl($timeout) {
    var vm = this;
    $timeout(function() {
      console.log(vm.parent.item);
    });
  }

我从不需要组件中的超时，因此可能会有一些我错过的东西。

http://plnkr.co/edit/0DRlbedeXN1Z5ZL45Ysf?p=preview

编辑：

哦，我忘记了，你需要使用$ onInit钩子：

this.$onInit = function() {
  console.log(vm.parent.item);
}

Answer 2

您的孩子应该通过绑定将项目作为输入。

(function() {
  'use strict';

  angular
    .module('childModule', [])
    .component('child', {
      templateUrl: 'child.tpl.html',
      controller: ChildCtrl,
       bindings: {
        item: '='
       }
    });

  function ChildCtrl() {
    console.log(this.parent)
    var vm = this;

  }
})();

所以你的父模板看起来像

<h1 ng-bind='$ctrl.item.name'></h1>
<child item="$ctrl.item"></child>

其余的应该是一样的。

Angular 1.5.x - 嵌套组件的问题

2 个答案: