关闭图标在使用 AngularJs 的引导模式上不起作用

Question

我正在使用 Twitter-Bootstrap 模式。我在模态标题上设置了一个关闭图标。我需要激活这个图标来关闭模态框。

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