English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1.Novo arquivo uiBootstrap.html, importa bibliotecas js e css dependentes
2.Novo arquivo uiBootstrap.js, define um módulo uiModule e importa os módulos dependentes
/** * Criado por zhong em 2015/9/7. */ var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]); });
3.Definir o template da janela popup dialogo
4.Definir um UiController e declarar uma função openDialog para abrir a janela popup dialogo
uiModule.controller("UiController",function($scope,$modal){ //Função de abrir o dialogo $scope.openDialog = function(){ $modal.open({ templateUrl:"myModalContent.html",//ID do dialogo, deve ser o mesmo que o ID do template estabelecido pelo html controller:"ModalController"//Especificar o controller do dialogo }); }; });
5.Definir o ModalController do dialogo popup
Neste controller, declara-se os tratamentos de clique dos botões de confirmar e cancelar na janela popup
controller("ModalController",function($scope, $modalInstance){ //Definir a função de tratamento do clique do botão de confirmação no dialogo $scope.ok = function(){ $modalInstance.close();// }; //Definir a função de tratamento do clique do botão de cancelamento no dialogo $scope.cancel = function(){ $modalInstance.dismiss('cancel'); } });
5.Adicionar um botão ao arquivo uiBootstrap.html para abrir a janela
<div ng-controller="UiController"> <button ng-click="openDialog()" class="btn btn-default">Abrir janela popup</button> </div>
6.Efeito
Suplemento:
O que foi mencionado acima é o que o editor apresentou para você sobre ui no Angularjs-Tutoriais de uso do Bootstrap, esperamos que sejam úteis para todos!