在 Angularjs 1.5.x 中创建可以访问父控制器字段的可重用组件

Question

我正在尝试创建一个可在整个应用程序中重复使用的可重用组件。我们正在使用 Angular 1.5.8

有一些数据需要从父组件传递到子组件。 （通常是一个持有信息的对象）。可以是

经过一番阅读，我发现有一个名为 require 的属性，您可以在其中提及父组件的名称，然后可以访问父控制器的方法。

主要缺点是父组件名称是硬编码的。这限制了组件的可重用性。

无论如何，我们是否可以以动态方式将数据从父组件传递给子组件。

代码示例

app.component('parent',
{ restrict: 'E', 
  scope: {}, 
  templateUrl: 'app/parent.html', 
  controller: function(){
    var vm = this;
     vm.sayHello = function (){
           return {
                  parentName : 'parent1',
                  parentCode : 'parentCode1'
             };
       };
   }, 
  controllerAs: 'vm'}); 

 app.component('child', {
   require: {
parentCtrl: '^^parent'
  },
controller: function() {
var self = this;
this.$onInit = function() {
  self.parentCtrl.sayHello();
};
}
 });

谢谢

Answer 1

在定义对象中为子组件添加绑定：

app.component('child',{ 
  bindings:{
    data: '<'
  }, 
  templateUrl: 'app/child.html', 
  controller: childController});

然后在 parent.html 中使用以下内容：

请戳这里：https://plnkr.co/edit/d6wS1dHVsYT3fNkMUVNY?p=preview

angular.noop 只是一个空函数，因此如果您没有组件的任何控制器，则可以放置 $ctrl 是默认的，如果你不指定 controllerAs 别名

您还可以在子组件 $onInit() 上使用 $onChanges() 和 $onDestroy() 生命周期钩子来控制组件在某些点执行的操作。

如果你使用 .component 删除限制：'E' 已经是一个元素