Chiusura di Twitter Bootstrap Modal dal controller angolare

Question

Ho una finestra modale che utilizzo per presentare un modulo agli utenti. Inseriscono le informazioni e quindi premono un pulsante che ha un ng-clic. Il server elabora la richiesta e restituisce una risposta. Quando la risposta è corretta, voglio chiudere la finestra modale dal controller. Come può essere realizzato?

Il modale è una parziale incluso in un'altra pagina

pagina principale:

<!-- main content --> 
<p>Foo</p> 
<!-- angular directive --> 
<foo-directive></foo-directive> 

contenuti di tale direttiva:

<div ng-controller="FooCtrl"> 
    <ul class="thumbnails"> 
     <li class="span3 tile tile-white" ng-repeat="foo in model.foo"> 
      <div> 
       {{foo.bar}} 
      </div> 
      <div> 
       ({{foo.bam}}) 
      </div> 
      <div> 
       <a data-toggle="modal" href="#myModal"><img src="{{foo.imgPath}}"></a> 
      </div> 
     </li> 
    </ul> 
    <!-- foo modal partial included by ejs --> 
    <% include foo_modal.ejs %> 
</div> 

modale markup:

<div id="fooModal" class="modal hide fade in" style="display: none; "> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal">×</a> 
     <h3>New Device</h3> 
    </div> 
    <div class="modal-body"> 
     <h4>Foo Modal</h4> 
     <div ng-controller="FooCtrl"> 
      <form name="fooFrm"> 
       <input id="email" type="email" class="input-medium" ng-model="fooEmail" 
         placeholder="Email"> 
       <button class="btn btn-primary btn-small" 
         ng-click="doFoo({email:fooEmail})">Email Link</button> 
      </form> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn" data-dismiss="modal">Close</a> 
    </div> 
</div> 

controller codice:

functionFooCtrl($scope, FooService) { 


    $scope.doFoo= function (email) { 
     FooService.save({email:email.fooEmail}) { 
      alert('Request successful'); 
      //TODO close Twitter bootstrap modal named fooModal here 
     }, 
      function (err) { 
       alert('Your request bonked, sorry'); 
       //TODO close twitter bootstrap modal named fooModal here 
      }); 
     } 
    }; 

Qual è il modo corretto per chiudere il modal dal controller nelle funzioni di successo e di errore?

Grazie in anticipo,

Answer 1

Hai guardato angular-ui bootstrap? C'è una direttiva Dialog (ui.bootstrap.dialog) che funziona abbastanza bene. È possibile chiudere la finestra di dialogo durante la chiamata di nuovo il modo angolare (per l'esempio):

$scope.close = function(result){ 
    dialog.close(result); 
}; 

Aggiornamento:

La direttiva è stato poi rinominato Modal.

Answer 2

Possiamo ottenere lo stesso senza usare angular-ui. Questo può essere fatto usando direttive angolari.

Prima aggiungere la direttiva al modale.

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

Creare una nuova direttiva angolare:

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

Ora chiamare il metodo respingere() dal controller.

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

Sono ancora ai miei primi giorni con angolare js. So che non dovremmo manipolare il DOM all'interno dei controller. Quindi ho la manipolazione del DOM nella direttiva. Non sono sicuro che sia ugualmente male. Se ho un'alternativa migliore, la posterò qui.

La cosa importante da notare è che non possiamo semplicemente usare ng-hide o ng-show nella vista per nascondere o mostrare il modale. Questo semplicemente nasconde lo sfondo modale e non modale. Dobbiamo chiamare il metodo di istanza modal() per rimuovere completamente il modal.

Answer 3

Ecco una direttiva angolare riutilizzabile che nasconde e mostra un modal Bootstrap.

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(); 
       }); 

      } 

     } 
    }; 

}); 

Utilizzo Esempio # 1 - questo presuppone che si desidera mostrare il modal - si potrebbe aggiungere ng-se come condizione

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

Utilizzo Esempio # 2 - questo utilizza un'espressione angolare in modal attributo -Visibile

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

Un altro esempio - di demo l'interazione di controllo, si potrebbe aggiungere qualcosa di simile al controller e mostrerà il modale dopo 2 secondi e poi nasconderlo, dopo 5 di seconda ds.

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

Sono in ritardo per contribuire a questa domanda - ha creato questa direttiva per un'altra domanda qui. Simple Angular Directive for Bootstrap Modal

Spero che questo aiuti.

Answer 4

È possibile aggiungere data-dismiss = "modal" agli attributi del pulsante che chiamano angularjs funtion.

Ad esempio;

<button type="button" class="btn btn-default" data-dismiss="modal">Send Form</button> 

Answer 5

È possibile farlo con un semplice codice jquery.

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

Answer 6

Si può fare in questo modo:

angular.element('#modal').modal('hide'); 

Answer 7

ho remixato the answer by @isubuz e this answer by @Umur Kontacı on attribute directives in una versione in cui il controller non chiama un'operazione DOM-come come "licenziare", ma invece cerca per essere più stile MVVM, impostare una proprietà booleana isInEditMode. La vista a sua volta collega questo bit di informazioni alla direttiva attribute che apre/chiude il modal bootstrap.

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

<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>

Answer 8

**just fire bootstrap modal close button click event** 
var app = angular.module('myApp', []); 
app.controller('myCtrl',function($scope,$http){ 
    $('#btnClose').click();// this is bootstrap modal close button id that fire click event 
}) 

-------------------------------------------------------------------------------- 

<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 

appena impostato 'pulsante di chiusura' id modale come ho impostato btnClose, per la chiusura di modal in angolare si deve sparare solo che il pulsante di chiusura evento Click come ho fatto $ (' #btnClose '). click()