Angularjs 将绑定传递到组件中的转移范围
在AngularJS 1.5中,我想将一个绑定从组件传递到(多槽)转包范围中——用于模板中的引用(在一个特定的或所有的范围中——任何一种方式都不行) 这用于创建通用自定义选择列表Angularjs 将绑定传递到组件中的转移范围,angularjs,angularjs-directive,angularjs-scope,web-component,transclusion,Angularjs,Angularjs Directive,Angularjs Scope,Web Component,Transclusion,在AngularJS 1.5中,我想将一个绑定从组件传递到(多槽)转包范围中——用于模板中的引用(在一个特定的或所有的范围中——任何一种方式都不行) 这用于创建通用自定义选择列表 // Component .component('mySelect', { bind: { collection: '<' }, transclude:{ header: 'mySelectHeader', item: 'mySelectItem'
// Component
.component('mySelect', {
bind: {
collection: '<'
},
transclude:{
header: 'mySelectHeader',
item: 'mySelectItem'
},
templateUrl: 'my-select-template',
controller: function(){
.....
}
});
...
// Component template
<script id="my-select-template" type="text/ng-template">
<ol>
<li ng-transclude="header"> </li>
<li ng-transclude="item"
ng-click="$ctrl.select($item)"
ng-repeat"$item in $ctrl.collection">
</li>
</ol>
</script>
...
// Example usage
<my-select collection="[{id: 1, name: "John"}, {id: 2, name: "Erik"}, ... ]>
<my-select-head></my-select-head>
<!-- Reference to $item from ng-repeate="" in component -->
<my-select-item>{{$item.id}}: {{$item.name}}</my-select-item>
</my-select>
//组件
.component('mySelect',{
绑定:{
集合:“在父组件my select中保留一个类似“selectedItem”的变量
在您的子组件my select项中,需要您的父组件,如下所示
require: {
mySelect: '^mySelect'
}
并在“我的选择项”组件的控制器中,访问父组件
$onInit = () => {
this.mySelectedItem= this.mySelect.selectedItem; // to use it inside my-select-item component.
};
select($item) {
this.mySelect.selectedItem = $item; // to change the selectedItem value stored in parent component
}
以便现在可以从中访问所选项目
<my-select-item>{{selectedItem.id}}: {{selectedItem.name}}</my-select-item>
{{selectedItem.id}:{{{selectedItem.name}
我也遇到了这个问题,在salih的回答的基础上,我提出了一个解决方案(免责声明——见下图:我认为这不一定是解决问题的最佳方法)。它涉及到创建一个存根组件以在mySelect组件中使用,如下所示:
.component('item', {
require: { mySelect: '^mySelect' },
bind: { item: '<' }
})
.component('item'{
要求:{mySelect:'^mySelect'},
bind:{item:'Transclusion本质上与您想要实现的相反。是的!就是这样,我正在考虑如何实现它!太糟糕了,我们无法将它挂接到$onChanges生命周期事件tho中。尽管$doCheck可以为我们处理它,但感觉有点脏。
<script id="my-select-template" type="text/ng-template">
<ol>
<li ng-transclude="header"> </li>
<li ng-click="$ctrl.select($item)"
ng-repeat"$item in $ctrl.collection">
<item item="$item" ng-transclude="item"></item>
</li>
</ol>
</script>
.component('myItemComponent', {
require: {
itemCtrl: '^item',
}
template: '<span>{{$ctrl.item.id}}: {{$ctrl.item.name}}</span>',
controller: function() {
var ctrl = this;
ctrl.$onInit = function() {
ctrl.item = ctrl.itemCtrl.item;
}
}
});
<my-select collection="[{id: 1, name: "John"}, {id: 2, name: "Erik"}, ... ]>
<my-select-head></my-select-head>
<my-select-item>
<my-item-component></my-item-component>
</my-select-item>
</my-select>
.component('mySelect', {
bind: {
collection: '<',
customFormat: '&?'
},
transclude:{
header: 'mySelectHeader'
},
templateUrl: 'my-select-template',
controller: function(){
var ctrl = this;
ctrl.format = function(item) {
if(ctrl.customFormat) {
return customFormat({item: item});
} else {
//default
return item;
}
}
.....
}
});
<script id="my-select-template" type="text/ng-template">
<ol>
<li ng-transclude="header"> </li>
<li ng-click="$ctrl.select($item)"
ng-repeat"$item in $ctrl.collection"
ng-bind="::$ctrl.format($item)">
</li>
</ol>
</script>