1

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

该值可以从父母那里更新，但孩子不能编辑它，只是显示它。那么单向绑定'<' 对吗？

而且我不能在父组件声明中传递子组件，因为父组件也会有其他用途。

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

并且父组件将被多次使用，不同的孩子，这就是为什么我不能在父声明中传递孩子。我需要绑定信息，出于自动更新的目的，当父母更新数据时，必须由孩子反映

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

检查 plunkr 上的工作示例

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

4

2 回答 2

2

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

于 2016-08-17T12:04:44.810 回答
1

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

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

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

controller: "ParentComponentController",

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

controller: ParentComponentController,

然后，如果您想name通过父控制器在子组件中使用 require ：

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

现在您已经将父控制器绑定到子控制器，您可以使用它：

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

在模板中。

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

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

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

于 2016-08-17T12:28:22.357 回答