Question

我正在尝试将值从父组件传递到角色1.5中的嵌套子组件

可以从父母更新值，但是孩子无法编辑它，只需显示它。那么单向绑定'＆lt;'对吗？

我无法在父组件声明中传递子组件，因为父组件也有其他用途。

关键是我的父组件存储了常见数据，但是它们   孩子们会以不同的方式使用它。

并且父组件将被使用多次，具有不同的   孩子，这就是为什么我不能把孩子送到父母家里面   宣言。我需要绑定信息，以便自动更新   父母更新数据，必须由孩子反映

HTML

<parent-component ng-transclude>
  <child-component name="$ctrl.characters.arya"></child-component>
  <child-component name="$ctrl.characters.john"></child-component>
</parent-component>

JS

   // Parent Component declaration
// /////////////////////////
(function() {
  'use strict';
  angular
    .module('app')
    .component("parentComponent", {
      transclude: true,
      controller: "ParentComponentController",
      template: 
        '<div class="parent-c"></div>'
    });
 })();



// Parent Component Controller
// /////////////////////////
(function() {
  'use strict';
  angular
    .module('app')
    .controller('ParentComponentController', ParentComponentController);

  function ParentComponentController() {
    var $ctrl = this;
    $ctrl.characters = {};
    $ctrl.characters.arya = "Arya Stark";
    $ctrl.characters.john = "John Snow";
  }
})();




//CHILD Component declaration
// /////////////////////////
(function() {
  'use strict';
  angular
    .module('app')
    .component("childComponent", {
      bindings: {
        name: '<'
      },
      controller: "ChildComponentController",
      template: 
        '<div class="child-c"' +
          '<h3>Im a child Component</h3>' +
          '<p><strong>Name: </strong>{{$ctrl.name}}</p>' +
        '</div>'
    });
 })();



// CHILD Component Controller
// /////////////////////////
(function() {
  'use strict';
  angular
    .module('app')
    .controller('ChildComponentController', ChildComponentController);

  function ChildComponentController() {
    var $ctrl = this;
  }
})();

Check the WORKING SAMPLE on plunkr

require 属性用于组件通信，但我试图使用它但没有成功:(，这里需要一点光。

Answer 1

你必须使用：<child-component name="$parent.$ctrl.characters.arya"></child-component>将父组件的值传递给他的嵌套子组件

Answer 2

您的代码存在不同的问题：

  function ParentComponentController() {
    var $ctrl = this;
    $ctrl.characters = {};
    $ctrl.characters.arya = "Arya Stark";
    $ctrl.characters.john = "John Snow";
  }

您不需要为此定义局部变量，因为不会在任何地方更改上下文。

controller: "ParentComponentController",

不要将字符串传递给此属性，传递引用：

controller: ParentComponentController,

然后，如果你想在子组件中通过带有require的父控制器传递name：

require: { parent: '^^parentComponent' },

现在您已将父控制器绑定到子级，您可以将其用于：

{{$ctrl.parent.characters.arya}}

在模板中。

http://plnkr.co/edit/3PRgQSGdBEIDKuUSyDLY?p=preview

如果您需要将名称作为属性传递给子组件，则必须将子组件放在父模板中，以便您可以调用$ ctrl。

http://plnkr.co/edit/1H7OlwbumkNuKKrbu4Vr?p=preview

Angularjs 1.5嵌套组件绑定

2 个答案: