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不是一个函数（在modal开头），那么我该怎么做才能使它起作用？

编辑：我可以在没有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模态结合到服务中

1 个答案: