angularJS模態(tài)框$modal實(shí)例代碼
1.引入$modal模塊
如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]);
2.執(zhí)行調(diào)模態(tài)框 函數(shù)
$scope.editModule = function(type, size, id) {
$scope.id = id;
var modalInstance = $modal.open({
templateUrl: 'tpl/weichat_modulebaseinfo.html', //template:'html元素模板',
controller: 'EditModuleCtrl', // 初始化模態(tài)范圍
size: size, //大小配置
scope: '一個(gè)作用域?yàn)槟B(tài)的內(nèi)容使用($modal會(huì)創(chuàng)建一個(gè)當(dāng)前作用域的子作用域,scope可有可無(wú))默認(rèn)為$rootScope',
resolve: {
items: function() {
return $scope.id; //向模態(tài)框控制器中傳值
}
}
background: '', //控制背景,true(有) or false(無(wú)),static背景存在,但是點(diǎn)擊模態(tài)窗口之外,模態(tài)窗不關(guān)閉
keyboard: '', //按下Esc時(shí),模態(tài)對(duì)話(huà)框是否關(guān)閉,默認(rèn)為ture
windowClass: '' //指定一個(gè)class并被添加到模態(tài)窗口中
});
modalInstance.result.then(function(selectedItem) { //模態(tài)框關(guān)閉后返回函數(shù),selectedItem為返回值
})
}
3.創(chuàng)建模態(tài)框控制器
app.controller('EditModuleCtrl', ['$scope', '$modalInstance', 'BookService', '$stateParams', 'items', function($scope, $modalInstance, BookService, $stateParams, items) { //依賴(lài)于modalInstance
//items為傳過(guò)來(lái)的值
$scope.modalBack = function() {
//執(zhí)行模態(tài)框內(nèi)部操作
}
$scope.ok = function() {
$modalInstance.close($scope.textid); //關(guān)閉并返回當(dāng)前選項(xiàng)
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel'); // 退出不執(zhí)行任何操作
}
}])
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS入門(mén)示例之Hello World詳解
這篇文章主要介紹了AngularJS入門(mén)示例之Hello World,較為詳細(xì)的分析了AngularJS程序的原理及Hello World程序的創(chuàng)建步驟,需要的朋友可以參考下2017-01-01
AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法
今天小編就為大家分享一篇AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
詳解angular部署到iis出現(xiàn)404解決方案
這篇文章主要介紹了詳解angular部署到iis出現(xiàn)404解決方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
anime.js 實(shí)現(xiàn)帶有描邊動(dòng)畫(huà)效果的復(fù)選框(推薦)
anime.js是一個(gè)靈活的輕型JavaScript動(dòng)畫(huà)庫(kù)。這篇文章主要介紹了anime.js 實(shí)現(xiàn)帶有描邊動(dòng)畫(huà)效果的復(fù)選框 ,需要的朋友可以參考下2017-12-12
angularjs指令中的compile與link函數(shù)詳解
這篇文章主要介紹了angularjs指令中的compile與link函數(shù)詳解,本文同時(shí)訴大家complie,pre-link,post-link的用法與區(qū)別等內(nèi)容,需要的朋友可以參考下2014-12-12
Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
angularjs下ng-repeat點(diǎn)擊元素改變樣式的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs下ng-repeat點(diǎn)擊元素改變樣式的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

