Explication détaillée du dialogue modal AngularJS

Explication détaillée du dialogue modal AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:06:11

original

1411 Les gens l'ont consulté

Dans le processus de développement de programmes GUI, il existe souvent les concepts de boîtes de dialogue modales et de boîtes de dialogue non modales

Boîte de dialogue modale : Durant l'activité de la sous-interface, la fenêtre parent ne peut pas répondre aux messages. Entrée utilisateur exclusive

Boîte de dialogue modale : aucune influence entre les fenêtres

La principale différence : la boîte de dialogue non modale et l'APP partagent la boucle de messages et ne monopoliseront pas l'utilisateur.

La boîte de dialogue modale est exclusive à la saisie de l'utilisateur et les autres interfaces ne peuvent pas répondre

Contenu de cet article

Angular JS implémente une boîte de dialogue modale. Basé sur AngularJS v1.5.3 et Bootstrap v3.3.6.

Structure du projet

Figure 1 Structure du projet

Exécuter les résultats

Figure 1 Résultats d'exécution : mode grand

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 模态对话框</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">模态框</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">当前选择：
<b>{{selected.item}}</b></div> 
</ul> 
</div> 
<div class="modal-footer"> 
<button class="btn btn-primary" ng-click="ok()"> 
确认 
</button> 
<button class="btn btn-warning" ng-click="cancel()">退出</button> 
</div> 
</script> 
<div class="container h1">AngularJS 模态对话框</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')">大模态</button> 
<button class="btn btn-default" ng-click="open()">中模态</button> 
<button class="btn btn-default" ng-click="open('sm')">小模态</button> 
<hr> 
<div class="h1" ng-show="selected">当前选择：{{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>

Copier après la connexion

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

Copier après la connexion

Le contenu ci-dessus est la boîte de dialogue modale AngularJS introduite par l'éditeur. J'espère qu'il sera utile à tout le monde !