AngularJS 将 uib 模态与服务相结合

Question

我尝试使用 uibModal (https://angular-ui.github.io/bootstrap/#!#%2Fmodal) 打开一个模式，但我想要一个内部带有自定义文本的模式。

我正在尝试像这样打开模式：

 var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: '/crims/thermofluor/experiments/components/modal.html',
    size: 'sm',
    controller: 'ModalController',
    resolve: {
        content: function () {
            return 'test';
        }
    }
});

有了这个控制器：

angular
.module('thermofluor')
.controller('ModalController', ModalController)

ModalController.$inject = ['$uibModal', '$uibModalInstance'];

function ModalController($uibModal, $uibModalInstance, content) {
  var $ctrl = this;
  $ctrl.content = content;

  $ctrl.ok = function () {
      $uibModalInstance.close();
  };

  $ctrl.cancel = function () {
      $uibModalInstance.dismiss();
  };
}

但它似乎不起作用，angular 说 ModalController 不是函数（在模态打开中），那么我该怎么做才能让它起作用？

编辑：我可以在没有 ModalController 的情况下做到这一点：

$uibModal.open({
    animation: true,
    ariaLabelledBy: 'modal-title-bottom',
    ariaDescribedBy: 'modal-body-bottom',
    templateUrl:  'components/modal.html',
    size: 'sm',
    controller: function($scope) {
        $scope.content = 'bottom';
    }
});

但是我的模式按钮不起作用

编辑

这终于奏效了，我是这样做的：

function openModal(templateName, content, title){
    var template = 'components/modal/'+templateName;
    $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title-bottom',
        ariaDescribedBy: 'modal-body-bottom',
        templateUrl:  template,
        size: 'sm',
        controllerAs: '$ctrl',
        controller: function($scope, $uibModalInstance) {
            $scope.content = content;
            $scope.title = title;
            var $ctrl = this;

            $ctrl.ok = function () {
                $uibModalInstance.close();
            };

            $ctrl.cancel = function () {
                $uibModalInstance.dismiss('cancel');
            };
        }
    });
}

Answer 1

最后我找到了解决方案，我是这样做的：

我创建了一个服务 ModalService :

angular.module('myModule')
.factory('ModalService', ModalService);

ModalService.$inject = ['$uibModal'];

function ModalService($uibModal) {
   return new ModalService();

   function ModalService(){
       var service = this;

       function openModal(templateName, params){
           var template = 'components/modal/'+templateName;
           $uibModal.open({
               animation: true,
               ariaLabelledBy: 'modal-title-bottom',
               ariaDescribedBy: 'modal-body-bottom',
               templateUrl:  template,
               size: 'sm',
               controllerAs: '$ctrl',
               controller: function($scope, $uibModalInstance) {
                  angular.forEach(params, function (e, key){
                   $scope[key] = e;
                   });
                   var $ctrl = this;

                   $ctrl.ok = function () {
                       $uibModalInstance.close();
                   };

                   $ctrl.cancel = function () {
                       $uibModalInstance.dismiss('cancel');
                   };
               }
           });
       }
       return {
            openModal: openModal
        };
    }
}

我在我的控制器中这样使用它：

 ModalService.openModal("modal.html", {"content": "This experiment doesn't have a tm point", "title": "Tm Point"});

我可以传递我需要的每个变量，然后将它们设置在我的模态 html 模板中

AngularJS 将 uib 模态与服务相结合

AngularJS combine uib modal to a service

angularjs

angular-ui-bootstrap

bootstrap-modal