详解AngularJS 模态对话框

在涉及GUI程序开发的过程中，常常有模态对话框以及非模态对话框的概念

模态对话框：在子界面活动期间，父窗口是无法进行消息响应。独占用户输入

非模态对话框：各窗口之间不影响

主要区别：非模态对话框与APP共用消息循环，不会独占用户。

模态对话框独占用户输入，其他界面无法响应

本文内容

Angular JS 实现模式对话框。基于 AngularJS v1.5.3 和 Bootstrap v3.3.6。

项目结构

 

图 1 项目结构

运行结果

图 1 运行结果：大模态

index.html

 
 
 
AngularJS 模态对话框
 
 
 
大模态 
中模态 
小模态 
 
当前选择：{{selected}}
 
 
 
 
 
 


 

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'); 
}});

以上内容是小编给大家介绍的AngularJS 模态对话框 ，希望对大家有所帮助！