Invocar ventana modal en AngularJS Bootstrap UI usando JavaScript

Usando el ejemplo mencionado aquí , ¿cómo puedo invocar la ventana modal usando JavaScript en lugar de hacer clic en un botón?

Soy nuevo en AngularJS e intenté buscar la documentación aquí y aquí sin suerte.

Gracias

De acuerdo, primero que todo, el http://angular-ui.github.io/bootstrap/ tiene una directiva y el servicio $dialog y ambos pueden usarse para abrir ventanas modales.

La diferencia es que con el contenido de la directiva de un modal se integra en una plantilla de alojamiento (una que activa la apertura de la ventana modal). El servicio $dialog es mucho más flexible y le permite cargar contenido modal desde un archivo separado así como también activar ventanas modales desde cualquier lugar en el código AngularJS (este es un controlador, un servicio u otra directiva).

No estoy seguro de lo que quiere decir exactamente con “usar código JavaScript”, pero suponiendo que se refiera a cualquier lugar en el código AngularJS, es probable que el servicio de $dialog sea ​​un camino por recorrer.

Es muy fácil de usar y en su forma más simple puedes escribir:

 $dialog.dialog({}).open('modalContent.html'); 

Para ilustrar que realmente puede ser desencadenado por cualquier código JavaScript aquí hay una versión que dispara modal con un temporizador, 3 segundos después de la instancia de un controlador:

 function DialogDemoCtrl($scope, $timeout, $dialog){ $timeout(function(){ $dialog.dialog({}).open('modalContent.html'); }, 3000); } 

Esto se puede ver en acción en este plan: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

Finalmente, aquí está la documentación de referencia completa para el servicio $dialog descrito aquí: https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

Para hacer ui $ modal trabajo angular con bootstrap 3 necesita sobrescribir los estilos

 .modal { display: block; } .modal-body:before, .modal-body:after { display: table; content: " "; } .modal-header:before, .modal-header:after { display: table; content: " "; } 

(Los últimos son necesarios si usa directivas personalizadas) y encapsula el html con

  

Abrir ventanas modales con pasar datos al diálogo

En caso de que alguien se interese por pasar los datos al diálogo:

 app.controller('ModalCtrl', function($scope, $modal) { $scope.name = 'theNameHasBeenPassed'; $scope.showModal = function() { $scope.opts = { backdrop: true, backdropClick: true, dialogFade: false, keyboard: true, templateUrl : 'modalContent.html', controller : ModalInstanceCtrl, resolve: {} // empty storage }; $scope.opts.resolve.item = function() { return angular.copy( {name: $scope.name} ); // pass name to resolve storage } var modalInstance = $modal.open($scope.opts); modalInstance.result.then(function(){ //on ok button press },function(){ //on cancel button press console.log("Modal Closed"); }); }; }) var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) { $scope.item = item; $scope.ok = function () { $modalInstance.close(); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; } 

Demo Plunker

El sitio web de AngularJS Bootstrap no se ha actualizado con la documentación más reciente. Hace alrededor de 3 meses, pkozlowski-opensource creó un cambio para separar $ modal de $ diálogo. La confirmación es la siguiente:

https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd

En esa confirmación, agregó nueva documentación para $ modal, que se puede encontrar a continuación:

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md .

¡Espero que esto ayude!

¡Manera rápida y sucia!

No es una buena manera, pero para mí parece ser la más simple.

Agregue una etiqueta de anclaje que contenga el objective de datos modal y el toggle de datos, tenga una identificación asociada con él. (Se puede agregar en su mayoría en cualquier lugar de la vista html)

  

Ahora,

Dentro del controlador angular, desde donde desea activar el modo modal solo use

 angular.element('#myModalShower').trigger('click'); 

Esto imitará un clic en el botón basado en el código angular y aparecerá el modal.

Diferente versión similar a la ofrecida por Maxim Shoustin

Me gustó la respuesta, pero la parte que me molestó fue el uso de como un contenedor para la plantilla modal.

Quería colocar la plantilla modal en un

oculto y enlazar el html interno con una variable de ámbito llamada modal_html_template principalmente porque creo que es más correcto (y más cómodo de procesar en WebStorm / PyCharm) colocar el html de la plantilla dentro de un

lugar de

esta variable se usará al llamar $modal({... 'template': $scope.modal_html_template, ...})

para enlazar el html interno, creé inner-html-bind que es una directiva simple

mira el ejemplo plunker

 
Selection from a modal: {{ selected }}

directiva inner-html-bind :

 app.directive('innerHtmlBind', function() { return { restrict: 'A', scope: { inner_html: '=innerHtml' }, link: function(scope, element, attrs) { scope.inner_html = element.html(); } } });