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

How to set component output binding from ui bootstrap's uibModal.open

本文关键字：open uibModal 设置 组件 绑定 输出 ui bootstrap      更新时间：2023-09-26

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

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。打开函数需要解析函数内所需的对象。在本例中，您希望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

相关文章：