Question

我正在使用Twitter-Bootstrap Modal。我在Modal标题上设置了一个关闭图标。我需要激活此图标才能关闭模态。

<div class="modal-content json-modal-body" id="full-width" ng-controller="projectdetailsController" close="CloseModal()"> 
  <div class="modal-header modal-header-confirm"> 
    <h4 class="modal-title ng-binding"> 
      <span class="glyphicon glyphicon-indent-left"></span>{{modalOptions.headerText}} 
      <a type="button" title="Close" data-dismiss="modal"><i ng-click="CloseModal()"    class="glyphicon glyphicon-remove icon-arrow-right pull-right"></i></a> 
    </h4> 
  </div>
  <div class="modal-body"> 
    <pre class="Modal-pre" ng-bind-html="modalOptions.bodyText"></pre> 
  </div> 
</div>

控制器：

var modalInstance=$scope.showJSON = function(){
  var modalOptions = {
    headerText: ' JSON Schema View',
    bodyText: 'jsonSchema'
  };
  var modalDefaults = {
    templateUrl: 'app/partials/jsonModal.html'
  };        
  modalService.showModal(modalDefaults, modalOptions).then(function (result) {

  });
}
$scope.CloseModal = function () {
  $modalInstance.close(); 
}

我正在使用ng-click="CloseModal()"来关闭模态。我还在父div上声明了close="CloseModal()"。我怎么解决这个问题？

我有一个AngularJs控制器用于这个模态。我可以使用控制器吗？

Answer 1

您必须在控制器中声明函数CloseModal（）

如果您使用angular-ui bootstrap，它应如下所示：

 ['$scope', '$modalInstance', function($scope, $modalInstance){ 

...

$scope.CloseModal = function () {
   $modalInstance.close(); 
}

Answer 2

请按照以下步骤操作：

var app =  angular.module('myApp',['ui.bootstrap']);

//模态的控制器

 app.controller('modalCtrl',['$scope','$modalInstance', function ($scope,$modalInstance) {
        'use strict';
    $scope.cancel = function () {
        $modalInstance.dismiss();
    };

第二控制器：

app.controller('Ctrl',['$scope','$modal', function ($scope,$modal) {

   $scope.openModal= function () {

      $modal.open({
                    backdrop: true,
                    keyboard: false,
                    backdropClick: false,
                    templateUrl: "path of your modal HTML",
                    dialogClass: "modal-content",
                    controller: 'modalCtrl',
                });
    }

关闭图标不能使用AngularJs在Bootstrap Modal上工作

2 个答案: