Olá, pessoal!

Mais um artigo da série AngularJS e hoje vamos ver como criar um dialog. Eu lembro que uma vez tentei fazer isso em JavaScript puro e foi muito sofrimento, mas o Angular-ui nos facilita muita coisa…

Como sempre, vou considerar que você já vem acompanhando a série e entende a estrutura básica com o Angular e rotas. O projeto que tem os exemplos da série está no meu GitHub.

Requisitos:

• angular-ui-bootstrap-modal.js
• angular-ui.js

Para o dialog, é desse cara que precisamos. Você pode baixá-los no projeto pegando o arquivo no meu github.

Na página do Angular-ui tem exemplos bacanas usando o modal http://angular-ui.github.io/bootstrap/.

Agora vamos colocar a mão na massa

Development

O primeiro passo é atualizarmos a declaração do module no arquivo app.js, deixando assim:

<span style="font-size: 14px; line-height: 1.5em;">var app = angular.module("myapp", [ "ui",</span>
"ui.directives","ui.bootstrap.modal" ]);

Adicionamos o “ui.bootstrap.modal” (o “ui.directives” não é requerido para esse exemplo).

Agora vamos atualizar o index.html, informando para carregar .js – que tem a funcionalidade do dialog:

<span style="font-size: 14px; line-height: 1.5em;">&lt;head&gt;</span>
&lt;script src=<i>"js/lib/angular-ui-bootstrap-modal.js"</i>&gt;&lt;/script&gt;
&lt;link rel=<i>"stylesheet"</i> href=<i>"css/bootstrap.css"</i>&gt;
&lt;/head&gt;

No meu caso, esse é o caminho.  Adicionei o css do bootstrap para ficar com layout agradável.

Vamos criar o controller que vai cuidar do dialog. No meu arquivo recipeController.js adicionei o seguinte controller:

<span style="font-size: 14px; line-height: 1.5em;">var MyCtrlDialog = function($scope) {</span>
$scope.open = function() {
$scope.showModal = true;
};
 
$scope.ok = function() {
$scope.showModal = false;
};
 
$scope.cancel = function() {
$scope.showModal = false;
};
};

A leitura é bem simples: quando a função open for chamada, ele deve mostrar o modal; quando a função  ok ou cancel for chamada, o modal deve ser fechado.

Como estou usando rotas, vou adicionar uma para o dialog. Não é requerido que seja feito com rotas, desde que ao carregar o HTML os .js sejam carregados, tudo vai funcionar.

No arquivo app.js adicionei a rota:

<span style="font-size: 14px; line-height: 1.5em;">when("/dialog", {</span>
templateUrl : "dialog.html",controller:MyCtrlDialog
}).

Agora vamos criar o arquivo dialog.html para vermos o resultado:

<span style="font-size: 14px; line-height: 1.5em;">&lt;!-- In this dialog is using </span><span style="text-decoration: underline;">angularui</span><span style="font-size: 14px; line-height: 1.5em;"> --&gt;</span>
&lt;body&gt;
&lt;!-- <span style="text-decoration: underline;">Criando</span> <span style="text-decoration: underline;">um</span> <span style="text-decoration: underline;">botão</span> <span style="text-decoration: underline;">para</span> <span style="text-decoration: underline;">abrir</span> o modal --&gt;
&lt;button class=<i>"btn"</i> ng-click=<i>"open()"</i>&gt;Open Dialog&lt;/button&gt;
 
&lt;!-- My dialog Content --&gt;
&lt;div modal=<i>"showModal"</i> close=<i>"cancel()"</i>&gt;
&lt;div class=<i>"modal-header"</i>&gt;
&lt;h4&gt;Modal Dialog&lt;/h4&gt;
&lt;/div&gt;
&lt;div class=<i>"modal-body"</i>&gt;
&lt;p&gt;<span style="text-decoration: underline;">Teste</span> dialog. Are you sure?&lt;/p&gt;
&lt;/div&gt;
&lt;div class=<i>"modal-footer"</i>&gt;
&lt;button class=<i>"btn btn-success"</i> ng-click=<i>"ok()"</i>&gt;<span style="text-decoration: underline;">Ok</span>&lt;/button&gt;
&lt;button class=<i>"btn"</i> ng-click=<i>"cancel()"</i>&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

Testando

 

Simples, não?

Abraços!