twitter-bootstrap - from - modal dismiss angular

Cierre de Twitter Bootstrap Modal desde el controlador angular

Question

Tengo una ventana modal que utilizo para presentar un formulario a los usuarios. Ingresan la información y luego presionan un botón para hacer un clic. El servidor procesa la solicitud y envía una respuesta. Cuando la respuesta sea exitosa, quiero cerrar la ventana modal desde el controlador. ¿Cómo se puede lograr esto?

El modal es un parcial incluido en otra página.

Pagina principal:

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

Contenido de esa directiva:

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

Marcado modal:

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

Código del controlador:

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

¿Cuál es la forma correcta de cerrar el modal desde el controlador en las funciones de éxito y error?

Gracias por adelantado,

Answer 1

¿Has mirado bootstrap angular ui ? Hay una directiva Dialog (ui.bootstrap.dialog) que funciona bastante bien. Puede cerrar el cuadro de diálogo durante la devolución de llamada de forma angular (según el ejemplo):

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

Actualizar:

La directiva ha sido renombrada como Modal .

Answer 2

Aquí hay una directiva angular reutilizable que ocultará y mostrará un modo 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();
                });

            }

        }
    };

});

Ejemplo de uso n. ° 1: esto supone que desea mostrar el modal; podría agregar ng-if como condición

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

Ejemplo de uso n. ° 2: utiliza una expresión angular en el atributo modal-visible

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

Otro ejemplo: para demostrar la interacción del controlador, puede agregar algo así a su controlador, que mostrará el modal después de 2 segundos y luego lo ocultará después de 5 segundos.

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

Llego tarde para contribuir a esta pregunta: he creado esta directiva para otra pregunta aquí. Directriz angular simple para Bootstrap Modal

Espero que esto ayude.

Answer 3

He remezclado la respuesta con @isubuz y esta respuesta con @Umur Kontacı sobre las directivas de atributos en una versión en la que su controlador no llama una operación similar a DOM como "descartar", sino que trata de ser más estilo MVVM, configurando un valor booleano propiedad isInEditMode . La vista, a su vez, enlaza este bit de información a la directiva de atributos que abre / cierra el modo de arranque.

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 4

Podemos lograr lo mismo sin usar angi ui. Esto se puede hacer usando directivas angulares.

Primero agregue la directiva al modal.

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

Crear una nueva directiva angular:

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

Ahora llame al método de despido () desde su controlador.

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

Todavía estoy en mis primeros días con js angular. Sé que no debemos manipular el DOM dentro de los controladores. Así que tengo la manipulación DOM en la directiva. No estoy seguro de si esto es igualmente malo. Si tengo una mejor alternativa, la publicaré aquí.

Lo importante a tener en cuenta es que no podemos simplemente usar ng-hide o ng-show en la vista para ocultar o mostrar el modal. Eso simplemente oculta el fondo modal y no el telón de fondo modal. Tenemos que llamar al método de instancia modal () para eliminar completamente el modal.

Answer 5

Puede agregar data-dismiss = "modal" a los atributos de su botón que llaman función angularjs.

Como;

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

Answer 6

Puedes hacerlo así:

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

Answer 7

Puedes hacerlo con un simple código jquery.

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

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>

simplemente establezca la identificación de "botón de cierre" modal cuando establezco btnCerrar, para cerrar modal en modo angular, solo tiene que activar el evento de clic de botón de cierre como hice $ (''# btnCerrar''). click ()