Значок Close не работает на Bootstrap Modal с помощью AngularJs

Question

Я использую Twitter-Bootstrap Modal. Я установил значок закрытия в заголовке 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()" закрыть модальный. Я также объявил close="CloseModal()" о родительском div. Как я могу это решить?

У меня есть регулятор 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', 
       }); 
    }