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

发布时间：2020-12-17 18:05:26 所属栏目：安全来源：网络整理

导读：给定一个带有输出绑定的组件,如下所示： angular.module('app').component('myComponent',{ templateUrl: 'myComponent.html',bindings: { onSelect: '' },controller: class { selectedItems = []; // called when the user clicks a button,outputs an arr

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!