大佬教程收集整理的这篇文章主要介绍了AngularJS 1.5父控制器如何将数据传递给组件控制器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Check Plunkr Example(更新并使用解决方案:)谢谢)
@H_355_5@my-component.js声明
(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>' }); })();
我的组件控制器
(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 } })();
和父母控制者
(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" }; } })();
<body ng-controller="MainController as vm">
<h2>{{vm.title}}</h2>
<my-component obj="vm.myObj"></my-component>
</body>
重要的是我有obj =“vm.myObj”的地方吗？
我有些不对劲,因为甚至没有拿vm.title：S
我不想只是将vm.myObj值打印到组件中,
我希望来自ParentController的vm.obj.value可以访问&存储在ComponentController中.
在指令中,scope属性允许我们定义是否要继承或隔离$scope.随着时间的推移,这种选择被推断为合理的默认值,几乎总是使我们的指令具有孤立的范围.通过添加bindToController属性,我们可以定义要传递给隔离范围的属性并直接绑定到控制器.
在组件中,使用bindings属性删除此重复过程,因为默认情况下$scope始终是隔离的.
一般例子：
// directive
.directive("myDirective",function myDirective() {
return {
scope: {},// isolate scope
bindToController: {
value: "=" // two-way binding
}
};
});
// component
.component("myComponent",{
bindings: {
value: "=" // two-way binding
}
});
详细示例：
angular
.module("myApp")
.controller("MyController",function MyController() {
var vm = this;
vm.myObj = {
a: 1,b: 2
};
})
.component("myComponent",{
bindings: { value: "=" },controller: "MyComponentController",template: "<ul><li>vm.value.a</li><li>vm.value.b</li></ul>"
});
在您的模板中,您可以传递数据,如下所示：
<div ng-controller="MyController as vm">
<my-component value="vm.myObj"></my-component>
</div>
如上所述,默认情况下,数据绑定到(组件)控制器并可在其中访问.
请注意,我们在这里使用双向绑定.从版本1.5开始提供的另一个附加功能是特定于组件的<表示单向绑定的符号.有关更多信息,请查看official documentation中的“基于组件的应用程序体系结构”部分.
以上是大佬教程为你收集整理的AngularJS 1.5父控制器如何将数据传递给组件控制器全部内容，希望文章能够帮你解决AngularJS 1.5父控制器如何将数据传递给组件控制器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。