如何在uibModal中使用组件component

main.js

'use strict';

(function(){
  class MainComponent {
    constructor($uibModal,$log){
      this.$uibModal = $uibModal;
      this.$log = $log;
    }
    openModal(params){
      this.$uibModal.open({
        template: '<modal $close="$close(result)" $dismiss="$dismiss(reason)" batch="$ctrl.params"></modal>',
        resolve:{
          params:() => params
        },
        controller: function(params){
          this.params = params;
        },
        controllerAs: '$ctrl'
      }).result.then(result => {
        this.$log.info(result);
        if(result) {this.reload();}
      }, reason => {
        this.$log.error(reason);
        this.$log.info('模态打散: ' + new Date());
      });
    }
    reload(){
      
    }
  }
  angular.module('modalApp')
    .component('main', {
      templateUrl: 'main.html',
      controller: MainComponent
    });
  }
})();

modal.html

<div class="modal-header">
  <span>摸态框 </span>
  <span class="close" ng-click="$ctrl.$dismiss({reason:'&times;'})">&times;</span>
</div>
<div class="modal-body">
  <pre ng-bind="$ctrl.params | json"></pre>
</div>
<div class="modal-footer">
  <button class="btn" ng-click="$ctrl.ok()">确定</button>
  <button class="btn" ng-click="$ctrl.$dismiss({reason:'cancel'})">取消</button>
</div>

modal.js

'use strict';

(function(){
  class ModalComponent {
    constructor(){
      
    }
    ok(){
      let $ctrl = this;
      console.log(this);
      $ctrl.$close({result:'save ok!'});
    }
  }
  angular.module('modalApp')
    .component('modal', {
      bindings: {
        params: '<',
        $close: '&',
        $dismiss: '&'
      },
      templateUrl: 'modal.html',
      controller: ModalComponent
    });
})();