如何将解析异步数据注入角度的ui bootstrap模式?

时间:2017-12-13 19:34:36

标签: angularjs angular-ui-bootstrap

如何将解析异步数据注入角度的ui bootstrap模式? 以下代码是打开模态的控制器。

import insertOpportunityModal from './insertOpportunityModal.html';

export default class OpportunitiesCtrl {

  constructor($uibModal, OpportunitiesService, EngagementsService, PAGE_SIZE) {
    this.$uibModal = $uibModal;
    this.OpportunitiesService = OpportunitiesService;
    this.EngagementsService = EngagementsService;
  }

  openInsertModal() {
    var modalInstance = this.$uibModal.open({
      animation: false,
      size: 'md', //['lg', 'md', 'sm']
      template: insertOpportunityModal,
      controller: 'InsertOpportunityModalCtrl',
      controllerAs: 'vm',
      resolve: {
        opportunityTypes: function (EngagementsService) {
          return EngagementsService.all();
        }
      }
    });

    modalInstance.rendered.then(() => {
    });

    modalInstance.result.then(() => {
      console.log('modal closed');
    }, (error) => {
      console.log(error);
    });
  }

}

OpportunitiesCtrl.$inject = ['$uibModal', 'OpportunitiesService', 'EngagementsService', 'PAGE_SIZE'];

在模态控制器中未定义opportunityTypes。 它适用于同步数据,但不适用于承诺。 怎么解决?

export default class InsertOpportunityModalCtrl {

  constructor($uibModalInstance, OpportunitiesService, opportunityTypes) {
    this.$uibModalInstance = $uibModalInstance;
    this.OpportunitiesService = OpportunitiesService;
    this.opportunityTypes = opportunityTypes;
    console.log('opportunityTypes', opportunityTypes);
  }

  save() {
  }

  cancel() {
    this.$uibModalInstance.dismiss('cancel');
  }

}

InsertOpportunityModalCtrl.$inject = ['$uibModalInstance', 'OpportunitiesService'];

1 个答案:

答案 0 :(得分:1)

您必须在opportunityTypes中注入InsertOpportunityModalCtrl

InsertOpportunityModalCtrl.$inject = 
    ['$uibModalInstance', 'OpportunitiesService', 'opportunityTypes'];