在 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' 已经是一个元素
我正在尝试创建一个可以在整个应用程序中重复使用的可重用组件。我们正在使用 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' 已经是一个元素