La Fermeture De Twitter Bootstrap Modal Angulaires Contrôleur

Nous pouvons obtenir le même sans l'aide d'angular-ui. Cela peut être fait en utilisant angulaire directives.

D'abord ajouter la directive de l'modal.

<div class="modal fade" my-modal ....>...</div>

Créer un nouveau angulaire de la directive:

app.directive('myModal', function() {
   return {
     restrict: 'A',
     link: function(scope, element, attr) {
       scope.dismiss = function() {
           element.modal('hide');
       };
     }
   } 
});

Maintenant de la rejeter() la méthode à partir de votre contrôleur.

app.controller('MyCtrl', function($scope, $http) {
    //You can call dismiss() here
    $scope.dismiss();
});

Je suis toujours dans mes premiers jours avec angular js. Je sais que nous ne devraient pas manipuler le DOM à l'intérieur de l'contrôleurs. J'ai donc la manipulation du DOM dans la directive. Je ne suis pas sûr si c'est aussi mauvais. Si j'ai une meilleure solution, je vais le poster ici.

La chose importante à noter est que nous ne pouvons tout simplement pas utiliser ng-hide ou ng-show à la vue pour afficher ou masquer le modal. Que cache simplement le modal et non modale de toile de fond. Nous devons appeler le modal() méthode d'instance à supprimer complètement le modal.

Voici une réutilisables Angulaire de la directive qui permettra de masquer et d'afficher un Bootstrap modal.

app.directive("modalShow", function () {
    return {
        restrict: "A",
        scope: {
            modalVisible: "="
        },
        link: function (scope, element, attrs) {

            //Hide or show the modal
            scope.showModal = function (visible) {
                if (visible)
                {
                    element.modal("show");
                }
                else
                {
                    element.modal("hide");
                }
            }

            //Check to see if the modal-visible attribute exists
            if (!attrs.modalVisible)
            {

                //The attribute isn't defined, show the modal by default
                scope.showModal(true);

            }
            else
            {

                //Watch for changes to the modal-visible attribute
                scope.$watch("modalVisible", function (newValue, oldValue) {
                    scope.showModal(newValue);
                });

                //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
                element.bind("hide.bs.modal", function () {
                    scope.modalVisible = false;
                    if (!scope.$$phase && !scope.$root.$$phase)
                        scope.$apply();
                });

            }

        }
    };

});

Exemple d'utilisation #1 - ce qui suppose que vous voulez montrer le modal - vous pouvez ajouter ng-si une condition

<div modal-show class="modal fade"> ...bootstrap modal... </div>

Exemple d'utilisation #2 - c'est une Angulaires expression modale-attribut visible

<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>

Un autre Exemple de démonstration le contrôleur d'interaction, vous pouvez ajouter quelque chose comme ceci à votre contrôleur pour afficher le modal après 2 secondes, puis le cacher au bout de 5 secondes.

$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)

Je suis en retard pour contribuer à cette question - créé cette directive pour une autre question. Simple Angulaire de la Directive Modal Bootstrap

Espère que cette aide.

J'ai remixé la réponse par @isubuz et cette réponse par @Umur Kontacı sur l'attribut directives dans une version où votre contrôleur ne pas appeler un DOM-comme l'opération comme "rejeter", mais essaie d'être plus MVVM style, la définition d'une propriété booléenne isInEditMode. La vue à son tour les liens de ce peu d'info à l'attribut de la directive qui s'ouvre/ferme le fichier de bootstrap modal.

JS:

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

app.directive('myModal', function() {
   return {
     restrict: 'A',
     scope: { myModalIsOpen: '=' },
     link: function(scope, element, attr) {
       scope.$watch(
         function() { return scope.myModalIsOpen; },
         function() { element.modal(scope.myModalIsOpen ? 'show' : 'hide'); }
       );
     }
   } 
});

app.controller('MyCtrl', function($scope) {
  $scope.isInEditMode = false;
  $scope.toggleEditMode = function() { 
    $scope.isInEditMode = !$scope.isInEditMode;
  };
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div ng-app="myApp" ng-controller="MyCtrl as vm">

<div class="modal fade" my-modal my-modal-is-open="isInEditMode">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        Modal body! IsInEditMode == {{isInEditMode}}
      </div>
      <div class="modal-footer">
        <button class="btn" ng-click="toggleEditMode()">Close</button>
      </div>
    </div>
  </div>
</div>

<p><button class="btn" ng-click="toggleEditMode()">Toggle Edit Mode</button></p> 
<pre>isInEditMode == {{isInEditMode}}</pre>
  
</div>

Vous pouvez le faire avec un simple code jquery.

$('#Mymodal').modal('hide');