English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

ui no Angularjs-Manual de Uso do Bootstrap

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!

Você Também Pode Gostar