Zamknięcie Twitter Bootstrap Modal Od kontrolera kątowego

Question

Mam okno modalne, którego używam do prezentacji formularza użytkownikom. Wprowadzają informacje, a następnie naciskają przycisk, który ma ng-kliknięcie. Serwer przetwarza żądanie i odsyła odpowiedź. Kiedy odpowiedź jest sukcesem, chcę zamknąć okno modalne od kontrolera. Jak można to osiągnąć?

modalna jest częściowym zawarte w innej stronie

Strona główna:

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

Zawartość tej dyrektywy:

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

Modal znaczników:

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

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

Jaki jest właściwy sposób zamknięcia modala ze sterownika w funkcjach sukcesu i błędów?

Dzięki z góry,

Answer 1

Pan spojrzał na angular-ui bootstrap? Istnieje dyrektywa Dialog (ui.bootstrap.dialog), która działa całkiem dobrze. Można zamknąć okno podczas rozmowy tylnej kątowa sposób (na przykład):

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

Aktualizacja:

Dyrektywa ten został przemianowany Modal.

Answer 2

Możemy osiągnąć to samo bez użycia kątowego-ui. Można tego dokonać za pomocą dyrektyw kątowych.

Najpierw dodaj dyrektywę do modalu.

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

Utwórz nowy kątowy dyrektywy:

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

Teraz wywołujemy metodę odrzucenie() od kontrolera.

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

Wciąż jestem w moich wczesnych dniach z kątowym js. Wiem, że nie powinniśmy manipulować DOMem wewnątrz kontrolerów. Mam więc manipulację DOM w dyrektywie. Nie jestem pewien, czy to jest równie złe. Jeśli mam lepszą alternatywę, opublikuję ją tutaj.

Należy pamiętać, że nie możemy po prostu użyć polecenia ng-hide lub ng-show w celu ukrycia lub pokazania modalu. To po prostu ukrywa modalne, a nie modalne tło. Musimy wywołać metodę modal(), aby całkowicie usunąć modal.

Answer 3

Oto dyrektywa Angular wielokrotnego użytku, która ukryje i wyświetli mod 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(); 
       }); 

      } 

     } 
    }; 

}); 

Wykorzystanie Przykład # 1 - zakłada to chcesz pokazać modalne - można dodać ng-jeśli jako warunek

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

Wykorzystanie Przykład nr 2 - to wykorzystuje kątowym wyraz w modalnym -visible atrybut

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

Inny przykład - demo interakcji kontrolera, można dodać coś takiego do kontrolera i pokaże modal po 2 sekundach, a następnie schować je po 5 secon ds.

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

Spóźniłem się, aby przyczynić się do tego pytania - stworzyłem tę dyrektywę na kolejne pytanie tutaj. Simple Angular Directive for Bootstrap Modal

Mam nadzieję, że to pomoże.

Answer 4

Możesz dodać usuwanie danych = "modalne" do atrybutów przycisków, które wywołują funkcję angularjs funtion.

Takich jak;

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

Answer 5

Można to zrobić za pomocą prostego kodu jquery.

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

Answer 6

Można to zrobić tak:

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

Answer 7

Mam zremiksowane the answer by @isubuz i this answer by @Umur Kontacı on attribute directives w wersji, gdzie kontroler nie wymaga operacji DOM podobny jak „odrzucenie”, ale zamiast prób być bardziej stylu MVVM, ustawiając właściwość boolowską isInEditMode. Widok z kolei łączy ten fragment informacji z dyrektywą atrybutu, która otwiera/zamyka modal ładowania początkowego.

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> 

wystarczy ustawić modalnego „zamykacz” id jak ustawić btnClose, do zamykania modalne w kanciasty trzeba po prostu zwolnić ten przycisk Zamknij zdarzenie click jak ja $ (” #btnClose '). click()