Закрытие Twitter Bootstrap Modal From Angular Controller

Question

У меня есть модальное окно, которое я использую для представления формы пользователям. Они вводят информацию и затем нажимают кнопку ng-click. Сервер обрабатывает запрос и отправляет ответ. Когда ответ будет успешным, я хочу закрыть модальное окно с контроллера. Как это можно достичь?

Модального частичный включен в другой странице

Главные:

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

Содержание этой директивы:

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

Модальных разметки:

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

контроллер код:

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

Каков правильный способ закрыть модальный контроллер с помощью функций успеха и ошибок?

Спасибо заранее,

Answer 1

Вы смотрели на angular-ui bootstrap? Существует директива Dialog (ui.bootstrap.dialog), которая работает достаточно хорошо. Вы можете закрыть диалоговое окно во время обратного вызова угловой путь (на примере):

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

Update:

директива с тех пор была переименована Modal.

Answer 2

Мы можем достичь того же, не используя угловые-ui. Это можно сделать с помощью угловых указаний.

Сначала добавьте директиву в модальный.

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

Создать новую угловую директиву:

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

Теперь вызовите метод отклонять() от контроллера.

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

Я все еще в свои ранние дни с угловыми js. Я знаю, что мы не должны манипулировать DOM внутри контроллеров. Поэтому у меня есть манипуляция DOM в директиве. Я не уверен, что это одинаково плохо. Если у меня будет лучшая альтернатива, я отправлю ее здесь.

Важно отметить, что мы не можем просто использовать ng-hide или ng-show в представлении, чтобы скрыть или показать модальный. Это просто скрывает модальный, а не модальный фон. Мы должны вызвать метод modal(), чтобы полностью удалить модальный.

Answer 3

Вот многоугольная директива Angular, которая скроет и покажет мода 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(); 
       }); 

      } 

     } 
    }; 

}); 

Пример использования # 1 - это предполагает, что вы хотите показать модальный - вы можете добавить нг-если в качестве условия

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

Пример # 2 - это использует Угловое выражение в модальном -visible атрибут

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

Другой пример - для демонстрации взаимодействия контроллера, вы можете добавить что-то вроде этого к контроллеру, и он будет показывать модальный через 2 секунды, а затем скрыть его после 5 SECON DS.

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

Я опаздываю, чтобы внести свой вклад в этот вопрос - создала эту директиву для другого вопроса здесь. Simple Angular Directive for Bootstrap Modal

Надеюсь, это поможет.

Answer 4

К вашим атрибутам кнопки вы можете добавить data-reject = "modal", которые вызывают функцию angularjs funtion.

Такие как;

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

Answer 5

Вы можете сделать это с помощью простого кода jquery.

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

Answer 6

Вы можете сделать это следующим образом:

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

Answer 7

Я ремикс the answer by @isubuz и this answer by @Umur Kontacı on attribute directives в версию, где ваш контроллер не называем DOM-подобные операции, как «уволить», но вместо этого пытается чтобы быть более MVVM-стилем, устанавливая логическое свойство isInEditMode. Представление, в свою очередь, связывает этот бит информации с директивой атрибута, которая открывает/закрывает загрузочный модальный.

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> 

просто установить модальный «кнопку закрытия» идентификатор, как я установить btnClose, для закрытия модального в угловой нужно просто стрелять, что близко кнопку щелчка события, как я сделал $ (» #btnClose '). click()