如何从ui bootstrap的uibModal.open设置组件输出绑定

Question

给定一个带有输出绑定的组件,如下所示:

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

Answer 1

（我知道可能为时已晚，但供将来参考......）

事实上你已经非常接近解决方案了。您需要像以前一样传递希望在组件外部调用的函数，但在组件内部您需要通过“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);
          };
        }
      }
    });
  };

普朗克：https://plnkr.co/edit/uf5zWX6ltSA0R1qJpDRL