Invocando janela modal na interface de usuário do AngularJS Bootstrap usando JavaScript

Usando o exemplo mencionado aqui , como posso invocar a janela modal usando JavaScript em vez de clicar em um botão?

Eu sou novo no AngularJS e tentei pesquisar a documentação aqui e aqui sem sorte.

obrigado

Para fazer o trabalho modular angular do ui $ com o bootstrap 3, você precisa sobrescrever os estilos

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

(Os últimos são necessários se você usar diretivas personalizadas) e encapsular o html com

  

Abrir janelas modais com passagem de dados para o diálogo

No caso, se alguém tem interesse em passar dados para o 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

O site AngularJS Bootstrap não foi atualizado com a documentação mais recente. Cerca de 3 meses atrás pkozlowski-opensource criou uma alteração para separar $ modal de $ dialog commit abaixo:

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

Nesse commit, ele adicionou uma nova documentação para $ modal, que pode ser encontrada abaixo:

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

Espero que isto ajude!

Maneira rápida e suja!

Não é um bom caminho, mas para mim parece o mais simples.

Adicione uma tag de âncora que contenha o destino de dados modal e a alternância de dados, tenha um id associado a ele. (Pode ser adicionado principalmente em qualquer lugar na exibição de html)

  

Agora,

Dentro do controlador angular, de onde você quer acionar o modal basta usar

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

Isso imitará um clique no botão com base no código angular e o modal aparecerá.

Versão diferente semelhante à oferecida por Maxim Shoustin

Gostei da resposta, mas a parte que me incomodou foi o uso de como um contêiner para o modelo do modal.

Eu queria colocar o template do modal em um

oculto e ligar o html interno com uma variável de escopo chamada modal_html_template principalmente porque eu acho mais correto (e mais confortável de processar no WebStorm / PyCharm) colocar o html do template dentro de um

vez de

essa variável será usada ao chamar $modal({... 'template': $scope.modal_html_template, ...})

a fim de ligar o html interno, eu criei inner-html-bind que é uma simples diretiva

confira o exemplo plunker

 
Selection from a modal: {{ selected }}

diretiva inner-html-bind :

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