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

Question

首先，我正在使用 components。

我有这个 "parent" 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 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

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

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

  }
})();

因此您的 parent 模板将如下所示

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

其余的应该是一样的。

Answer 2

您需要从您的父组件中删除 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);
}

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

Angular 1.5.x - Issue with nested components

javascript

angularjs

angularjs-components