Angulaire Modal - fermeture/rejetant modal

Je suis nouveau sur Angulaire et en essayant de mettre en œuvre un modal. Avoir un problème de fermeture/rejet de l'modal - lorsque je clique sur le bouton annuler, rien ne se passe.
Voici le code du contrôleur:

angular.module('navApp')
    //Passing the $modal to controller as dependency
    .controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
        $scope.title = "Hello, Angm-Generator!";
        $scope.open = function () {
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalCtrl'
            });
        };
    }])

    .controller('ModalCtrl', function ($scope, $uibModalInstance) {
        //Added some content to Modal using $scope
        $scope.content = "ModalCtrl, Yeah!"
        //Add cancel button
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    })

et voici le template de vue de la réelle modal

<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <button type="button" class="close" datadismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Hello from Modal!</h3>
    </div>
    <div class="modal-body">
        Modal Content from: <b>{{ content }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" ngclick="cancel()">Cancel</button>
    </div>
</script>

Même en cliquant sur la croix en haut à droite de modal ne pas fermer la modale. Des idées? Merci:)

ng-click="$dismiss()" est tout ce que vous devez
cela ne fonctionne pas, message d'erreur indique .$rejeter() n'est pas une fonction. Seulement annuler travaille pour moi
Désolé il fonctionne réellement::)) Mais en cliquant sur la croix en haut à droite toujours pas de fermer la modale.
Vous devez ajouter le même ng-click expression de la croix
oui, viens de réaliser que. Merci

OriginalL'auteur A Allen | 2016-05-18

  1. 1

    Ne devrait-elle pas être ng-click="effacer()" au lieu de ngclick?

    Aussi je ne pense pas que le champ est lié à la manette, je ne l'ai pas testé mais je crois que vous avez besoin de plus d'options:

    var modalInstance = $uibModal.open({
   templateUrl: 'myModalContent.html',
   controller: 'ModalCtrl',
   controllerAs: '$mCtrl',
   bindToController: true
});

    Et puis il suffit de mettre à jour votre modèle:

    ng-click="$mCtrl.cancel()"
    Vous avez raison au sujet de la ng-click, mais le contrôleur de déclaration et l'utilisation de $champ d'application est très bien.
    Merci à tous, ng-cliquez sur la fait fonctionner. Mais en ajoutant les autres options semblent le faire arrêter de travailler. La chose drôle est, le modal est toujours pas de clôture, lorsque je clique sur la croix dans le coin supérieur droit.

    OriginalL'auteur johan

  2. 1

    Avez-vous essayé de $uibModalInstance.close()?

    Une autre chose que vous pouvez faire est de 

     $scope.open = function () {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalCtrl'
        });
        modalInstance.result.then(function successCallBack() {
            modalInstance.close()
         }, function errorCallBack() {
            modalInstance.close()
        })
    };`

    OriginalL'auteur Santosh Kumar

  3. -2

    Si vous voulez fermer le modèle , cliquez sur la barre transversale alors , vous pouvez utiliser 

    <button type="button" class="close" data-dismiss="modal">&times;</button>

    Ce sera le bouton , et data-dismiss="modal" va fermer votre modal.

    Non, l'original de Bootstrap ne l'est pas. OP utilise UI Bootstrap, qui a de la "re-mise en œuvre tous les contrôles en natif NG". Voir github.com/angular-ui/bootstrap/issues/941

    OriginalL'auteur Ganesh Kamble