Mostre pop-ups da maneira mais elegante

Eu tenho esse aplicativo AngularJS. Tudo funciona muito bem.

Agora, preciso mostrar pop-ups diferentes quando condições específicas se tornarem verdadeiras, e fiquei imaginando qual seria a melhor maneira de proceder.

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 anexar ao DOM diretamente do controlador.

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

opção 2

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

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

Portanto, tenho certeza de que deve haver uma maneira melhor de conseguir o que quero.

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

Quando pensamos nisso, os modais são uma espécie de rotas AngularJS, mas apenas exibidas no pop-up modal.

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

É engraçado porque estou aprendendo o Angular e assistindo alguns vídeos do canal deles no Youtube. O palestrante 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 esse trecho de código específico em um serviço e não em um controlador.

Meu palpite seria injetar novos elementos pop-up no DOM e manipulá-los separadamente, em vez de mostrar e ocultar o mesmo elemento. Dessa forma, você pode ter vários pop-ups.

O vídeo inteiro é muito interessante de assistir também :-)

• Crie uma diretiva 'pop-up' 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 dele.
• Não há problema em mover as 2 divs na árvore DOM, conforme necessário, dentro da diretiva. Qualquer código de interface do usuário está OK nas diretivas, incluindo o código para posicionar o pop-up no centro da tela.
• Crie e ligue um sinalizador booleano ao controlador. Este sinalizador irá controlar a visibilidade.
• Crie variáveis ​​de escopo vinculadas às funções OK / Cancel etc.

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

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



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

Consulte http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ para obter uma maneira simples de fazer diálogo modal com o Angular e sem a necessidade de inicialização

Edit: Desde então, uso ng-dialog em http://likeastore.github.io/ngDialog, que é flexível e não possui dependências.

O Angular-ui vem com a diretiva de diálogo. Use-o e defina templateurl para qualquer página que você queira incluir. 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.