给定一个带有输出绑定的组件,如下所示：
angular.module('app').component('myComponent',{
templateUrl: 'myComponent.html',bindings: {
onSelect: '&'
},controller: class {
selectedItems = [];
// called when the user clicks a button,outputs an array of selected items
selectItems() {
this.onSelect({items: this.selectedItems});
}
}
});
<my-component on-select='$ctrl.select(items)' />
如何使用ui.bootstrap的uibModal.open实现相同的功能？
这似乎不起作用：
$uibModal.open({
component: 'myComponent',resolve: {
onSelect: () => (items) => { console.log('parent event handler',items); }
}
});
解决方法
(我知道这可能为时已晚,但供将来参考……)
实际上你非常接近解决方案.您需要像以前一样传递要在组件外部调用的函数,但在组件内部需要通过“resolve”绑定获取引用.
angular.module('app').component('myComponent',{
templateUrl: 'modal.html',bindings: {
resolve: '<'
},controllerAs: 'vm',controller: function() {
var vm = this;
vm.ok = function() {
vm.resolve.onSelect({
item: 'from modal'
});
}
}
});
在$uibModal.open函数中,您需要在函数中解析所需的对象.在这种情况下,您希望onSelect是一个函数,因此您需要返回它.这是从组件内发送输出事件时调用的函数(vm.resolve.onSelect({…})).
$scope.openModal = function() {
$uibModal.open({
component: 'myComponent',resolve: {
onSelect: function() {
return function(params) {
alert('hooray: ' + params.item);
};
}
}
});
};
普兰克：@L_502_0@
