Javascript 如何使用组件从Angular UI引导模式传递参数和检索结果

我有一个简单的例子，我将模态定义为组件，并使用uiModal.open打开该模态。但是，当我想使用resolve on open方法和controller构造函数上的参数将任何自定义数据传递给该模式时，数据不会被传递。另外，尝试注入$uibModalInstance失败，错误为未知提供程序：$uibModalInstanceProvider我花了将近三个小时研究这个问题，我尝试传递$modalInstance、$uibModalInstance等。。我尝试了resolve和constructor参数，在stackoverflow上搜索了很多线程，每个线程都没有提示ui.bootstrap、angularjs等的升级

核心问题是，我尝试以不同的方式使用组件来定义模态，而不是在调用者控制器的代码中内联定义控制器和指示模板

最后，借助于从许多线程中收集到的部分知识，我得出了这个奇妙而简单的解决方案

要将任何数据传递给基于组件的modal和modalInstance，我们只需更新组件定义绑定部分：

import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';

let closeExceptionModalComponent = {
  restrict: 'E',
  bindings: {
        resolve: '<', //this let us pass any data from caller constructor
    modalInstance: '<', //modalInstance will be auto injected
    close: '&',
    dismiss: '&'
    },
  template,
  controller,
    controllerAs: 'vm'
};

export default closeExceptionModalComponent;

我的最终模态控制器如下所示：

我希望这将帮助其他尝试使用组件和传递/返回数据进行ui引导模式的人！：

import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';

let closeExceptionModalComponent = {
  restrict: 'E',
  bindings: {
        resolve: '<',
    close: '&',
    dismiss: '&'
    },
  template,
  controller,
    controllerAs: 'vm'
};

export default closeExceptionModalComponent;

class CloseExceptionModalController {

  constructor() {
         //I need to retrieve here some data from caller
    }

    ok() {
        this.close(); //I need to pass here result to caller using modalInstance.close
    }

    cancel() {
        this.dismiss();
    }
}

export default CloseExceptionModalController;

//I need to pass some data to modal
let modalInstance = this.$uibModal.open({
    animation: true,
    component: 'closeExceptionModal',
    appendTo: angular.element(document.body),
})

modalInstance.result.then( (result) => {
    alert(result); //this must be result data from modal
}, () => {
});

import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';

let closeExceptionModalComponent = {
  restrict: 'E',
  bindings: {
        resolve: '<', //this let us pass any data from caller constructor
    modalInstance: '<', //modalInstance will be auto injected
    close: '&',
    dismiss: '&'
    },
  template,
  controller,
    controllerAs: 'vm'
};

export default closeExceptionModalComponent;

let modalInstance = this.$uibModal.open({
    animation: true,
    component: 'closeExceptionModal',
    appendTo: angular.element(document.body),
    resolve: {
        modalData: function() {
            return "test";
        }
    }
})

modalInstance.result.then( (result) => {
    alert(result);
}, () => {
});

class CloseExceptionModalController {

  constructor() {
        this.$ctrl = this; //we store the controller instance

        console.log(this.$ctrl.resolve.modalData); //here is my input data
    }

    ok() {
        //modal instance is auto injected and we can call close passing result
        this.$ctrl.modalInstance.close(this.closureNote);
    }

    cancel() {
        this.dismiss();
    }
}

export default CloseExceptionModalController;