Angularjs中的ui-bootstrap的使用教程
更新時間：2017年02月19日 10:40:05 投稿：mrr
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
1.新建uiBootstrap.html頁面，引入依賴的js和css類庫
2.新建uiBootstrap.js文件，定義一個uiModule 模塊，引入依賴的模塊
/**
* Created by zhong on 2015/9/7.
*/
var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]);
});
3.定義dialog彈出窗口的模板
4.定義一個 UiController，并聲明一個用于打開dialog彈出框的函數(shù)openDialog
uiModule.controller("UiController",function($scope,$modal){
//打開dialog的函數(shù)
$scope.openDialog = function(){
$modal.open({
templateUrl:"myModalContent.html",//dialog的id，與html建立的template的id一致
controller:"ModalController"http://指定dialog的controller
});
};
})
5.定義dialog彈出框的 ModalController
這個controller中聲明彈出框中確認(rèn)和取消按鈕的單擊事件的處理函數(shù)
controller("ModalController",function($scope, $modalInstance){
//定義dialog中的確認(rèn)按鈕的點擊事件的處理函數(shù)
$scope.ok = function(){
$modalInstance.close();//
};
//定義dialog中的取消按鈕的點擊事件的處理函數(shù)
$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的使用教程，希望對大家有所幫助！
相關(guān)文章
Angularjs 動態(tài)改變title標(biāo)題(兼容ios)
這篇文章主要介紹了 Angularjs 動態(tài)改變title標(biāo)題(兼容ios)的相關(guān)資料,需要的朋友可以參考下2016-12-12
學(xué)習(xí)AngularJs:Directive指令用法（完整版）
這篇文章主要學(xué)習(xí)AngularJs:Directive指令用法，內(nèi)容很全面，感興趣的小伙伴們可以參考一下2016-04-04
本章介紹的是如何對模板驅(qū)動表單創(chuàng)建自定義校驗器，它相比較響應(yīng)式表單自定義校驗器略為復(fù)雜一些。接下來通過本文給大家分享Angular在模板驅(qū)動表單中自定義校驗器的方法，感興趣的朋友一起看看吧2017-08-08
AngularJS中controller控制器繼承的使用方法
這篇文章主要介紹了AngularJS中controller控制器繼承的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了AngularJS 中ui-view傳參的實例詳解的相關(guān)資料,這里提供實例幫助大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下2017-08-08
能夠驗證用戶在表單中輸入的內(nèi)容是否合理與正確是十分重要的，這篇文章主要介紹了ionic使用angularjs表單驗證（模板驗證），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了AngularJS中使用three.js的實例詳解，我將之前自己做的demo放到了angularJS的一個component中，其實一開始是沒有準(zhǔn)備用框架的但是后面發(fā)現(xiàn)需要進(jìn)行的雙向綁定越來越多，后期表單數(shù)據(jù)的變化量也很大，最后還是選擇用NG來做這些事情2017-07-07
這篇文章主要介紹了AngularJS驗證、過濾器、指令的相關(guān)知識,angularJS中提供了許多的驗證指令，可以輕松的實現(xiàn)驗證，具體詳情大家通過本文一起學(xué)習(xí)吧，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了Angular4編程之表單響應(yīng)功能,結(jié)合實例形式分析了Angular4表單響應(yīng)功能的具體實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
AngularJS學(xué)習(xí)筆記之基本指令(init、repeat)
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。ng-app 指令初始化一個 AngularJS 應(yīng)用程序。ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。ng-model 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。2015-06-06