Leitura recomendada: Explicação detalhada da caixa de diálogo Modal AngularJS
$ modal é um serviço que pode criar janelas modais rapidamente, criar parte das páginas, controladores e associá -los.
$ modal tem apenas um método aberto (opções)
templateurl: o endereço da janela modal
Modelo: usado para exibir tags HTML
Escopo: o uso do conteúdo com um escopo modal (de fato, $ modal criará um subscópio do escopo atual) por padrão é $ Rootscope
Controlador: o controlador especificado para $ modal, inicializa $ escopo, que pode ser injetado com $ modalInstance
Resolva: Defina um membro e passe -o para o controlador especificado por $ modal. É equivalente a uma propriedade de rotas. Se você precisar passar por um objeto, precisará usar o angular.copy ()
Centro: Controle o plano de fundo, valores permitidos: true (padrão), false (sem fundo), "estático" - o fundo existe, mas ao clicar fora da janela modal, a janela modal não fecha
Teclado: Quando o ESC é pressionado, se a caixa de diálogo modal está fechada, padrão para ter
Windowclass: especifique uma classe e adicione -a à janela modal
O método aberto retorna uma instância modal, que possui as seguintes propriedades
Feche (resultado): Feche a janela modal e passe um resultado
Dispense (Razão): desfazer o método modal e passe um motivo
Resultado: um contrato que é aprovado quando a janela modal é fechada ou revogada
Aberto: um contrato, uma variável passada quando a janela modal é aberta e o conteúdo é carregado
Além disso, o $ ModalInstance estende dois métodos $ Close (Result), $ Disiss (Motivo), que fecha facilmente Windows e não requer controladores adicionais
Html
<! Doctype html> <html ng-pp = "modaldemo"> <head> <title> </title> <link href = "lib/bootstrap/css/bootstrap.min.css" Rel = "StyleSheet"> <script src = "lib/angular/angular.min.min.min.min.min.miP.MinMin.minMin.minm" Rel = "StyleSeet"> <script src = "lib/angular/angular. src = "lib/bootstrap-gh-páginas/ui-bootstrap-tpls -... min.js"> </script> <script src = "lib/angular/in/angular-locale_zh-cn.js" ModaldMoc "ModaldMoc" ModaldMoc "ModaldMoc" ModaldMoc "ModaldMoc" ModaldMoc "ModaldMoc" ModaldMoc "ModaldMoc) id = "mymodalContent.html"> <div> <h> eu sou um modal! </div> <div> <botão ng-click = "ok ()"> ok </button> <button ng-click = "cancel ()"> cancel </button> </div> </script> <butt ng-click = "Open ()"> Abra! var modaldemoctrl = função ($ scope, $ modal, $ log) {$ scope.items = ['item', 'item', 'item']; $ scope.open = function () {var modalInstance = $ modal.open ({templateurl: 'mymodalContent.html', controlador: modalInstanceCtrl, resolve: {itens: function () {return $ scope.items;}}}}); modalInstance.opened.then (function () {// A função executada após a janela modal ser aberta e console.log ('modal é aberto');}); ModalInstance.Result.Then (function (resultado) {console.log (resultado);}, function (Razão) {console.log (Razão); // Clique na área em branco, o clique do cenário sempre será lançado. Clique em cancelar e o verão será cancelado $ LOG.Info ('' Modal Dispensado em: ' + }); }; }; var modalInstanceCtrl = função ($ scope, $ modalInstance, itens) {$ scope.items = itens; $ scope.selected = {item: $ scope.items []}; $ scope.ok = function () {$ modalInstance.close ($ scope.selected); }; $ scope.cancel = function () {$ modalInstance.dismiss ('cancel'); }; }; </script> </body> </html>O acima é o conteúdo relevante da caixa de modo pop-up angularJS (Model) introduzida a você pelo editor. Espero que seja útil para todos!