将绑定传递给组件中的transcluded范围-Passingabindingtotranscludedscopeincomponent

5  

In your parent component my-select keep a variable like "selectedItem"

在您的父组件中，my-select保留一个像“selectedItem”这样的变量

In your child component my-select-item, require your parent component like below

在您的子组件my-select-item中，需要您的父组件，如下所示

require: {
  mySelect: '^mySelect'
}

And in your my-select-item component's controller, to access your parent component

在my-select-item组件的控制器中，访问您的父组件

 $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
 }

So that the selected item is now accessible from

现在可以从中访问所选项目

{{selectedItem.id}}: {{selectedItem.name}}

0  

I ran into this problem as well, and building upon salih's answer, I came up with a solution (disclaimer--see bottom: I don't think this is necessarily the best approach to your problem). it involves creating a stubbed out component for use in the mySelect component, as follows:

我也遇到了这个问题，并在salih的答案的基础上，我提出了一个解决方案（免责声明 - 见底：我认为这不一定是解决问题的最佳方法）。它涉及创建一个用于mySelect组件的存根组件，如下所示：

.component('item', {
    require: { mySelect: '^mySelect' },
    bind: { item: '<' }
})

then, tweaking your template:

然后，调整你的模板：

this will mean there's always an item component with the value bound to it. now, you can use it as a require in a custom component:

这意味着总是有一个项目组件，其值绑定到它。现在，您可以在自定义组件中将其用作需求：

.component('myItemComponent', {
    require: {
        itemCtrl: '^item',
    }
    template: '{{$ctrl.item.id}}: {{$ctrl.item.name}}',
    controller: function() {
        var ctrl = this;
        ctrl.$OnInit= function() {
            ctrl.item = ctrl.itemCtrl.item;
        }
    }
});

and to use it:

并使用它：

after I implemented this, I actually decided to change my strategy; this might work for you as well. instead of using a transclude, I passed in a formatting function, i.e.:

实施之后，我实际上决定改变策略;这对你也有用。而不是使用transclude，我传入了一个格式化函数，即：

.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;
            }
        }
        ..... 
    }
});

then in the template, just use:

然后在模板中，只需使用：

let me know if you have any feedback or questions!

如果您有任何反馈或问题，请与我们联系！