AngularJS +1.5 父控制器如何将数据传递给组件控制器 [英] AngularJS +1.5 How can a Parent controller pass data to a component Controller
问题描述
我有一个类似的组件:
检查 Plunkr 示例(更新并使用解决方案:)谢谢)
my-component.js 声明
(function() {'使用严格';有角的.module('应用').component("myComponent", {绑定:{ 对象:="}，控制器:组件控制器"，控制器为:vm"，模板:'<section class="result"><h2>{{vm.title}}</2>'+'<h3>使用父控制器值</h3>'+'<ul><li>{{vm.obj.a }}</li><li>{{vm.obj.b}}</li></ul>'+'<h3>使用子控制器值:'+'<ul class="component-controller"><li>{{ vm.copiedObj.a }}</li><li>{{vm.copiedObj.b}}</li>;/ul>'+'</节>'});})();我的组件控制器
(function() {'使用严格';有角的.module('应用').controller('ComponentController', ComponentController);功能组件控制器(){var vm = 这个；vm.title = "我是儿童控制器"vm.copiedObj = vm.obj;//这应该存储位于 MainController 中的 myObj 变量}})();和父控制器
(function() {'使用严格';有角的.module('app', []);})();//app.controller.js/////////////////////(功能() {'使用严格';有角的.module('应用').controller('MainController', MainController);函数主控制器(){var vm = 这个；vm.title = "我是家长控制器";vm.myObj = {a:我是第一个值"，b:我是第二个值"};}})();所以如果我有一个像
这样的模板 <h2>{{vm.title}}</h2><my-component obj="vm.myObj"></my-component>重要的是我有 obj="vm.myObj" 对吗?我有问题，因为我什至没有拿 vm.title :S
我不想只是将 vm.myObj 值打印到组件中，我希望 ParentController 中的 vm.obj.value 可以访问 &存储在 ComponentController 中.
我们对组件的处理方式是使用 bindings 属性.它是指令的 scope 和 bindToController 属性组合的简化版本.
在指令中，scope 属性允许我们定义是要继承还是隔离 $scope.随着时间的推移，这个选择被推导出为一个合理的默认值，几乎总是使我们的指令具有隔离范围.通过添加 bindToController 属性，我们可以定义要传递给隔离作用域并直接绑定到控制器的属性.
在一个组件中，使用 bindings 属性，这个重复的过程被删除，因为 $scope 在默认情况下总是隔离的.
一般示例:
//指令.directive("myDirective", 函数 myDirective() {返回 {scope: {},//隔离作用域绑定到控制器:{value: "="//双向绑定}};});//成分.component("myComponent", {绑定:{value: "="//双向绑定}});详细示例:
角度.module("myApp").controller("MyController", function MyController() {var vm = 这个；vm.myObj = {一:1，乙:2};}).component("myComponent", {绑定:{值:="}，控制器:MyComponentController"，控制器为:vm"，模板:<ul><li>vm.value.a</li><li>vm.value.b</li></ul>"});在您的模板中，您可以像这样传递数据:
<my-component value="vm.myObj"></my-component>如上所述，默认情况下，数据绑定到(组件的)控制器并可在其中访问.
请注意，我们在这里使用了双向绑定.另一个从 1.5 版开始可用并且特定于组件的附加功能是 < 符号，它表示 one-way绑定.查看官方文档中的基于组件的应用程序架构"部分a> 了解更多信息.
I have a component like:
Check Plunkr Example ( Updated and Working with the solution :) Thanks )
my-component.js declaration
(function() {
'use strict';
angular
.module('app')
.component("myComponent", {
bindings: { obj: "=" },
controller: "ComponentController",
controllerAs: "vm",
template:
'<section class="result"><h2>{{vm.title}}</2>' +
'<h3>Using the Parent Controller values</h3>' +
'<ul><li>{{ vm.obj.a }}</li><li>{{vm.obj.b}}</li></ul>' +
'<h3>Using the Children controller values:'+
'<ul class="component-controller"><li>{{ vm.copiedObj.a }}</li><li>{{vm.copiedObj.b}}</li></ul>' +
'</section>'
});
})();
my-component controller
(function() {
'use strict';
angular
.module('app')
.controller('ComponentController', ComponentController);
function ComponentController() {
var vm = this;
vm.title = "I'm the Children controller"
vm.copiedObj = vm.obj; // This should store the myObj variable located in the MainController
}
})();
and a Parent Controller
(function() {
'use strict';
angular
.module('app', []);
})();
// app.controller.js
// ///////////////////
(function() {
'use strict';
angular
.module('app')
.controller('MainController', MainController);
function MainController() {
var vm = this;
vm.title = "I'm the Parent controller";
vm.myObj = {
a: "I'm the first value",
b: "I'm the second value"
};
}
})();
So if i have a template like
<body ng-controller="MainController as vm">
<h2>{{vm.title}}</h2>
<my-component obj="vm.myObj"></my-component>
</body>
The important line is where i have obj="vm.myObj" right ? I have something wrong because isn't even taking the vm.title :S
I don't want just to print the vm.myObj values into the component, i want the vm.obj.value from the ParentController to be accessible & stored in the ComponentController.
The way we do it with components is using the bindings property. It’s simplified version of the directives’s scope and bindToController properties combined.
In a directive, the scope property allows us to define whether we want to inherit or isolate the $scope. That choice has, with time, been deduced to a sensible default to almost always make our directives have isolate scope. And with the addition of the bindToController property, we can define which properties we want to pass down to the isolate scope and bind directly to the controller.
In a component, with the bindings property this repetitive process is removed as the $scope by default is always isolate.
General Example:
// directive
.directive("myDirective", function myDirective() {
return {
scope: {}, // isolate scope
bindToController: {
value: "=" // two-way binding
}
};
});
// component
.component("myComponent", {
bindings: {
value: "=" // two-way binding
}
});
Detailed Example:
angular
.module("myApp")
.controller("MyController", function MyController() {
var vm = this;
vm.myObj = {
a: 1,
b: 2
};
})
.component("myComponent", {
bindings: { value: "=" },
controller: "MyComponentController",
controllerAs: "vm",
template: "<ul><li>vm.value.a</li><li>vm.value.b</li></ul>"
});
In your template, you can pass down the data like so:
<div ng-controller="MyController as vm">
<my-component value="vm.myObj"></my-component>
</div>
As explained above, the data is bound to and accessible in the (component's) controller by default.
Note that we’re using two-way binding here. Another addition that is available as of version 1.5 and is specific to components is the < symbol which denotes one-way bindings. Check out the "Component-based application architecture" section in the official documentation for more information.
这篇关于AngularJS +1.5 父控制器如何将数据传递给组件控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
