Bootstrap和Angularjs配合自制彈框的實(shí)例代碼
更新時(shí)間：2016年08月24日 11:15:05 作者：haiziguo
今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實(shí)例代碼，代碼簡(jiǎn)單易懂，有需要的朋友跟著小編一起學(xué)習(xí)
指令
directive('bsPopup', function ($parse) {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, elem, attrs, ctrl) {
scope.$watch(function () {
return $parse(ctrl.$modelValue)(scope);
}, function (newValue) {
if (newValue ==0) {
$(elem).modal('hide');
return;
}
if (newValue == 1) {
$(elem).modal('show');
return;
}
});
}
}
});
<button class="btn btn-xs btn-warning" data-target="#myModal" data-toggle="modal" ng-click="sss()">彈框</button> <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" bs-popup="" ng-model="test" id="myModal" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header alert-info"> <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button> <h4 id="myModalLabel" class="modal-title">彈框</h4> </div> <div class="modal-body"> <button class="btn btn-info" ng-click="hhh()">測(cè)試</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div>
以上所述是小編給大家介紹的Bootstrap和Angularjs配合自制彈框，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- js+html5實(shí)現(xiàn)半透明遮罩層彈框效果
- vue.js中toast用法及使用toast彈框的實(shí)例代碼
- js自定義彈框插件的封裝
- 輕松實(shí)現(xiàn)js彈框顯示選項(xiàng)
- vue.js實(shí)現(xiàn)只彈一次彈框
- js實(shí)現(xiàn)上下左右彈框劃出效果
- 基于layer.js實(shí)現(xiàn)收貨地址彈框選擇然后返回相應(yīng)的地址信息
- javascript實(shí)現(xiàn)無(wú)法關(guān)閉的彈框
- js重寫alert事件（避免alert彈框標(biāo)題出現(xiàn)網(wǎng)址）
- JavaScript單例模式實(shí)現(xiàn)自定義彈框
相關(guān)文章
AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析
這篇文章主要介紹了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系,結(jié)合實(shí)例形式較為深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之間的關(guān)系,需要的朋友可以參考下2017-01-01
詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務(wù)
這篇文章給大家詳細(xì)介紹了AngularJs提供的嚴(yán)格上下文轉(zhuǎn)義服務(wù)$sce與$sceDelegate，文中介紹的很詳細(xì)，有需要的朋友們可以參考借鑒。2016-09-09
AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結(jié)合具體實(shí)例形式分析了AngularJS自定義指令的實(shí)現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下2017-06-06
AngularJS模塊學(xué)習(xí)之Anchor Scroll
這篇文章主要介紹了AngularJS模塊學(xué)習(xí)之Anchor Scroll 的相關(guān)資料,需要的朋友可以參考下2016-01-01
ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證）
能夠驗(yàn)證用戶在表單中輸入的內(nèi)容是否合理與正確是十分重要的，這篇文章主要介紹了ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
angular+webpack2實(shí)戰(zhàn)例子
本篇文章主要介紹了angular+webpack2實(shí)戰(zhàn)例子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了初識(shí)angular框架后的所思所想,學(xué)習(xí)認(rèn)識(shí)angular后的一些個(gè)人問題總結(jié)，需要的朋友可以參考下2016-02-02
AngularJs定制樣式插入到ueditor中的問題小結(jié)
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問題小結(jié)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了angular實(shí)現(xiàn)商品篩選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細(xì)，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。2016-12-12