AngularJS将uib模式组合到服务

我试图用uibModal（）打开一个模态，但我希望有一个内部带有自定义文本的模态

我试图像这样打开模态：

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

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

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

但它似乎不起作用，angular说ModalController不是一个函数（在模态的开头），那么我该怎么做才能使它起作用呢

编辑：我可以在没有ModalController的情况下执行此操作：

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

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

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

但是我的modal的按钮不起作用

编辑

这终于起作用了，我是这样做的：

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

---

最后，我找到了一个解决方案，以下是我所做的：

我创建了一个服务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
        };
    }
}

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

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

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

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

---

我可以传递我需要的每个变量，只需在我的模式html模板中设置它们

您没有将

'content'

添加到注入（

ModalController.$inject

）即使是您，也不应该导致错误您的$inject有两个元素。您的ModalController函数有3个。Besids你正在使用

这个
，但你没有使用controllerAs。我添加了它，但仍然是我的错误，似乎我的主控制器不知道什么是ModalController。你可能忘了在html页面中包含模式控制器的脚本。