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

Close icon doesn't work on Bootstrap Modal using AngularJs

本文关键字：模式 不起作用 AngularJs 图标      更新时间：2023-09-26

我正在使用Twitter-Bootstrap 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 控制器。我可以使用控制器吗？

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

如果你使用angular-upi引导程序，它应该看起来像这样：

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

按照以下步骤操作：

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',
                });
    }
相关文章：