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

Creating reusable component in Angularjs 1.5.x which can access parent controller fields

我正在尝试创建一个可以在整个应用程序中重复使用的可重用组件。我们正在使用 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();
};
}
 });

谢谢

为定义对象中的子组件添加绑定:

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

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

Plunkr 在这里:https://plnkr.co/edit/d6wS1dHVsYT3fNkMUVNY?p=preview

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

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

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