Angularjsのui-Bootstrapの使用方法

1.新建uiBootstrap.htmlページを生成し、依存するjsおよびcssライブラリをインクルードします

2.新建uiBootstrap.jsファイルを生成し、依存するモジュールを定義します

/**
 * Created by zhong on 2015/9/7.
 */
var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]);
});

3.dialogポップアップウィンドウのテンプレートを定義します

4.UiControllerを定義し、dialogポップアップウィンドウを開くためのopenDialog関数を宣言します

uiModule.controller("UiController",function($scope,$modal){
//dialogを開く関数
$scope.openDialog = function(){
$modal.open({
  templateUrl:"myModalContent.html",//dialogのidは、HTMLで作成したtemplateのidと一致します
controller:"ModalController"//dialogのcontrollerを指定します
});
 };
})

5.dialogポップアップウィンドウの ModalControllerを定義します

このcontrollerでは、ポップアップウィンドウ内の確認およびキャンセルボタンのクリックイベントの処理関数を宣言します

controller("ModalController",function($scope, $modalInstance){
//dialog内の確認ボタンのクリックイベントの処理関数を定義します
$scope.ok = function(){
$modalInstance.close();//
};
//dialog内のキャンセルボタンのクリックイベントの処理関数を定義します
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
 }
});

5.uiBootstrap.htmlファイルにボタンを追加して、ウィンドウを開くために使用します

<div ng-controller="UiController">
 <button ng-click="openDialog()" class="btn btn-default">ポップアップウィンドウを開く</button>
</div>

6.効果

補足：

以上は、編集者が皆さんに紹介したAngularjsのui-bootstrapの使用方法についてのチュートリアルを提供します！