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

Question

首先，我正在使用 components .

我有这个“父”组件:

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

我只是想与另一个组件共享对象 item，如下所示:

(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>

实际上我收到以下错误:

Expression 'undefined' in attribute 'item' used with directive 'parent' is non-assignable!

这是DEMO为了更好地说明情况

你能向我解释一下如何让它发挥作用吗？

Answer 1

您需要删除 bindings来自您的父组件。 bindings绑定(bind)到组件 Controller ，如 scope绑定(bind)到指令的范围。您没有将任何内容传递给 <parent></parent>所以你必须删除它。

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

  require: {
    parent: '^parent'
  }

当然子模板应该修改为:

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

最后，如果您想从子 Controller 记录父 Controller 内的项目，则必须编写:

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

我的组件中从来不需要超时，因此我可能错过了一些明显的东西。

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

编辑:

哦我忘了，你需要使用 $onInit 钩子(Hook):

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