Mostrar pop-ups da maneira mais elegante

Eu tenho esse aplicativo AngularJS. Tudo funciona bem.

Agora preciso mostrar popups diferentes quando condições específicas se tornarem verdadeiras e fiquei me perguntando qual seria a melhor maneira de prosseguir.

Atualmente estou avaliando duas opções, mas estou absolutamente aberto a outras opções.


Opção 1

Eu poderia criar o novo elemento HTML para o pop-up e acrescentar ao DOM diretamente do controlador.

Isso quebrará o padrão de design do MVC. Não estou feliz com essa solução.


opção 2

Eu sempre poderia inserir o código para todos os pop-ups no arquivo HTML estático. Então, usando o ngShow , posso ocultar / mostrar apenas o pop-up correto.

Esta opção não é realmente escalável.


Então, eu tenho certeza que tem que haver uma maneira melhor de conseguir o que eu quero.

Com base na minha experiência com os modais AngularJS, até agora acredito que a abordagem mais elegante é um serviço dedicado ao qual podemos fornecer um modelo parcial (HTML) para ser exibido em um modal.

Quando pensamos sobre isso, modais são como rotas AngularJS, mas apenas exibidas em popup modal.

O projeto de bootstrap AngularUI ( http://angular-ui.github.com/bootstrap/ ) tem um excelente serviço $modal (usado para ser chamado de $ dialog antes da versão 0.6.0) que é uma implementação de um serviço para exibir conteúdo como um popup modal.

É engraçado porque eu estou aprendendo Angular e estava assistindo alguns vídeos do canal deles no Youtube. O locutor menciona seu problema exato neste vídeo https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 em torno da marca de 28:30 minutos.

Tudo se resume a colocar essa parte específica do código em um serviço, em vez de um controlador.

Meu palpite seria injetar novos elementos popup no DOM e lidar com eles separados em vez de mostrar e ocultar o mesmo elemento. Desta forma, você pode ter vários pop-ups.

O vídeo todo é muito interessante para assistir também 🙂

  • Crie uma diretiva ‘popup’ e aplique-a ao contêiner do conteúdo pop-up
  • Na diretiva, envolva o conteúdo em uma posição absoluta div junto com a máscara div abaixo dela.
  • Não há problema em mover as 2 divs na tree DOM, conforme necessário, dentro da diretiva. Qualquer código de interface do usuário é OK nas diretivas, incluindo o código para posicionar o pop-up no centro da canvas.
  • Crie e ligue um sinalizador booleano ao controlador. Este sinalizador controlará a visibilidade.
  • Criar variables ​​de escopo que se ligam a funções OK / Cancel etc.

Edição para adicionar um exemplo de alto nível (não funcional)

 
.... ....
.... ....
.directive('popup', function() { var p = { link : function(scope, iElement, iAttrs){ //code to wrap the div (iElement) with a abs pos div (parentDiv) // code to add a mask layer div behind // if the parent is already there, then skip adding it again. //use jquery ui to make it dragable etc. scope.watch(showPopup, function(newVal, oldVal){ if(newVal === true){ $(parentDiv).show(); } else{ $(parentDiv).hide(); } }); } } return p; });

Veja http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ para uma maneira simples de fazer modal dialog com Angular e sem precisar de bootstrap

Edit: Eu tenho usado desde ng-dialog desde http://likeastore.github.io/ngDialog que é flexível e não tem nenhuma dependência.

Angular-ui vem com diretiva de diálogo.Use-o e defina templateurl para qualquer página que você deseja include.Essa é a maneira mais elegante e eu a usei no meu projeto também. Você pode passar vários outros parâmetros para o diálogo conforme a necessidade.