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

Plunkr：https://plnkr.co/edit/uf5zWX6ltSA0R1qJpDRL

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

1 个答案: