Руководство по использованию ui-bootstrap в Angularjs

1. Создайте страницу uiBootstrap.html, включите зависимые js и css библиотеки

2. Создайте файл uiBootstrap.js, определите модуль uiModule и включите зависимые модули

/**
 * Создано zhong 7 сентября 2015 года.
 */
var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]);
});

3. Определите шаблон dialog弹出窗口

4. Определите UiController и声明一个用于打开dialog弹出框的函数openDialog

uiModule.controller("UiController",function($scope,$modal){
//Функция для открытия диалога
$scope.openDialog = function(){
$modal.open({
  templateUrl:"myModalContent.html",//id диалога, должно соответствовать id шаблона, созданного в html
controller:"ModalController"//Указать controller для диалога
});
 };
});

5. Определить controller для диалогового окна ModalController

В этом controller объявлены обработчики событий клика по кнопкам подтверждения и отмены в диалоговом окне

controller("ModalController",function($scope, $modalInstance){
//Определить обработчик события клика по кнопке подтверждения в диалоге
$scope.ok = function(){
$modalInstance.close();//
};
//Определить обработчик события клика по кнопке取消 в диалоге
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
 }
});

5. Добавьте кнопку в файл uiBootstrap.html, чтобы открыть окно

<div ng-controller="UiController">
 <button ng-click="openDialog()" class="btn btn-default">Открыть диалоговое окно</button>
</div>

6. Эффекты

Дополнение:

Вот руководство по использованию ui-bootstrap в Angularjs, которое я介绍了 вам, надеюсь, это поможет вам!