詳解AngularJS 模態(tài)對(duì)話框

更新時(shí)間：2016年04月07日 13:36:18 作者：船長(zhǎng)&CAP

在涉及GUI程序開(kāi)發(fā)的過(guò)程中，常常有模態(tài)對(duì)話框以及非模態(tài)對(duì)話框的概念。接下來(lái)通過(guò)本文給大家介紹AngularJS 模態(tài)對(duì)話框，感興趣的朋友一起學(xué)習(xí)吧

在涉及GUI程序開(kāi)發(fā)的過(guò)程中，常常有模態(tài)對(duì)話框以及非模態(tài)對(duì)話框的概念

模態(tài)對(duì)話框：在子界面活動(dòng)期間，父窗口是無(wú)法進(jìn)行消息響應(yīng)。獨(dú)占用戶輸入

非模態(tài)對(duì)話框：各窗口之間不影響

主要區(qū)別：非模態(tài)對(duì)話框與APP共用消息循環(huán)，不會(huì)獨(dú)占用戶。

模態(tài)對(duì)話框獨(dú)占用戶輸入，其他界面無(wú)法響應(yīng)

本文內(nèi)容

Angular JS 實(shí)現(xiàn)模式對(duì)話框?；?AngularJS v1.5.3 和 Bootstrap v3.3.6。

項(xiàng)目結(jié)構(gòu)

圖 1 項(xiàng)目結(jié)構(gòu)

運(yùn)行結(jié)果

圖 1 運(yùn)行結(jié)果：大模態(tài)

index.html

<!DOCTYPE html>
<!--[if lt IE 7]> 
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]--><!--[if IE 7]> 
<html class="no-js lt-ie9 lt-ie8">
<![endif]--><!--[if IE 8]> 
<html class="no-js lt-ie9"> 
<![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head>
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><title>AngularJS 模態(tài)對(duì)話框</title><link rel="stylesheet" 
href="../src/vendor/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myApp" class="body"> 
<!-- modal template --> 
<script type="text/ng-template" id="myModelContent.html"> 
<div class="modal-header"> 
<h3 class="modal-title">模態(tài)框</h3> 
</div> 
<div class="modal-body"> 
<ul> 
<li ng-repeat="item in items"> 
<a ng-click="selected.item = item">{{item}}</a> 
</li> 
<div class="h2">當(dāng)前選擇：
<b>{{selected.item}}</b></div> 
</ul> 
</div> 
<div class="modal-footer"> 
<button class="btn btn-primary" ng-click="ok()"> 
確認(rèn) 
</button> 
<button class="btn btn-warning" ng-click="cancel()">退出</button> 
</div> 
</script> 
<div class="container h1">AngularJS 模態(tài)對(duì)話框</div> 
<section class="row"> 
<section ng-controller="modalDemo" class="col-md-6" 
style="margin: 40px auto; float: none; background: #fff; padding: 30px;"> 
<button class="btn btn-default" ng-click="open('lg')">大模態(tài)</button> 
<button class="btn btn-default" ng-click="open()">中模態(tài)</button> 
<button class="btn btn-default" ng-click="open('sm')">小模態(tài)</button> 
<hr> 
<div class="h1" ng-show="selected">當(dāng)前選擇：{{selected}}</div> 
</section> 
</section> 
<!-- load js --> 
<script src="../src/vendor/angular/angular.js">
</script> 
<script 
src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js">
</script> 
<script src="../src/js/mymodal.js">
</script>
</body>
</html>

mymodal.js

/** * */angular.module('myApp', 
[ 'ui.bootstrap' ])
// demo controller.controller('modalDemo', function($scope, $modal, $log) 
{ 
// list 
$scope.items = [ 'angularjs', 'backbone', 'canjs', 'Ember', 'react' ]; 
// open click 
$scope.open = function(size) 
{ 
var modalInstance = $modal.open({ 
templateUrl : 'myModelContent.html', 
controller : 'ModalInstanceCtrl', // specify controller for modal 
size : size, 
resolve : { 
items : function() 
{ 
return $scope.items; 
} 
} 
}); 
// modal return result 
modalInstance.result.then(function(selectedItem)
{ 
$scope.selected = selectedItem; 
}, function() 
{ 
$log.info('Modal dismissed at: ' + new Date()) 
}); 
}})// modal controller.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) 
{ 
$scope.items = items; 
$scope.selected = 
{ 
item : $scope.items[0] 
}; 
// ok click 
$scope.ok = function()
{ 
$modalInstance.close($scope.selected.item); 
}; 
// cancel click 
$scope.cancel = function() 
{ 
$modalInstance.dismiss('cancel'); 
}});

以上內(nèi)容是小編給大家介紹的AngularJS 模態(tài)對(duì)話框，希望對(duì)大家有所幫助！

您可能感興趣的文章: