Héc*_*eón 4 inheritance scope angularjs angularjs-scope
我有一个组件,如:
检查Plunkr示例 (更新并使用解决方案:)谢谢)
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中.
我们使用组件的方式是使用bindings属性.它是指令范围和bindToController属性组合的简化版本.
在指令中,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",
controllerAs: "vm",
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开始并且特定于组件的另一个附加是<符号,其表示单向绑定.有关详细信息,请查看官方文档中的" 基于组件的应用程序体系结构 "部分.
| 归档时间： |
|
| 查看次数： |
12526 次 |
| 最近记录： |