Guida all'uso di ui-bootstrap in Angularjs

1. Creare una pagina uiBootstrap.html, introdurre le librerie js e css dipendenti

2. Creare un file uiBootstrap.js, definire un modulo uiModule e introdurre i moduli dipendenti

/**
 * Creato da zhong il 7 settembre 2015.
 */
var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]);
});

3. Definire il modello della finestra di dialogo pop-up

4. Definire un UiController e dichiarare una funzione per aprire la finestra di dialogo pop-up openDialog

uiModule.controller("UiController",function($scope,$modal){
//Funzione per aprire il dialogo
$scope.openDialog = function(){
$modal.open({
  templateUrl:"myModalContent.html",//L'ID del dialogo, deve essere coerente con l'ID del template creato in HTML
controller:"ModalController"//Specifica il controller del dialogo
});
 };
});

5. Definisci il controller di dialogo ModalController

In questo controller vengono dichiarate le funzioni di gestione dei clic sui pulsanti di conferma e annullamento della finestra emergente

controller("ModalController",function($scope, $modalInstance){
//Definisci la funzione di gestione dell'evento di clic del pulsante di conferma nel dialogo
$scope.ok = function(){
$modalInstance.close();//
};
//Definisci la funzione di gestione dell'evento di clic del pulsante di annullamento nel dialogo
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
 }
});

5. Aggiungi un pulsante nel file uiBootstrap.html per aprire la finestra

<div ng-controller="UiController">
 <button ng-click="openDialog()" class="btn btn-default">Apri finestra emergente</button>
</div>

6. Effetti

Supplemento:

Come sopra, questo è il tutorial di utilizzo di ui-bootstrap in Angularjs che l'autore ha introdotto ai lettori, sperando che sia utile a tutti voi!