Bootstrap和Angularjs配合自制彈框的實例代碼
更新時間：2016年08月24日 11:15:05 作者：haiziguo
今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實例代碼，代碼簡單易懂，有需要的朋友跟著小編一起學習
指令
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()">測試</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div>
以上所述是小編給大家介紹的Bootstrap和Angularjs配合自制彈框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
AngularJS中$injector、$rootScope和$scope的概念和關聯(lián)關系深入分析
這篇文章主要介紹了AngularJS中$injector、$rootScope和$scope的概念和關聯(lián)關系,結合實例形式較為深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之間的關系,需要的朋友可以參考下2017-01-01
詳解AngularJs中$sce與$sceDelegate上下文轉義服務
這篇文章給大家詳細介紹了AngularJs提供的嚴格上下文轉義服務$sce與$sceDelegate，文中介紹的很詳細，有需要的朋友們可以參考借鑒。2016-09-09
AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
這篇文章主要介紹了AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結合具體實例形式分析了AngularJS自定義指令的實現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了AngularJS模塊學習之Anchor Scroll 的相關資料,需要的朋友可以參考下2016-01-01
能夠驗證用戶在表單中輸入的內容是否合理與正確是十分重要的，這篇文章主要介紹了ionic使用angularjs表單驗證（模板驗證），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
本篇文章主要介紹了angular+webpack2實戰(zhàn)例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了初識angular框架后的所思所想,學習認識angular后的一些個人問題總結，需要的朋友可以參考下2016-02-02
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問題小結的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細介紹了angular實現(xiàn)商品篩選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細，相信對大家的理解和學習具有一定的參考借鑒價值，有需要的朋友可以一起來學習學習。2016-12-12