AngularJS modal dialog box, angularjs Modal

AngularJS modal dialog box, angularjs Modal

In the process of GUI program development, the concepts of modal dialogs and non-modal dialogs are often found.

Modal Dialog Box: During the sub-interface activity, the parent window cannot respond to messages. Exclusive user input

Non-Modal Dialog Box: no effect between windows

The main difference is that non-modal dialog boxes and apps share message loops and do not exclusively occupy users.

Modal Dialog Box exclusive user input, other interfaces cannot respond

Content

Angular JS implementation mode dialog box. Based on AngularJS v1.5.3 and Bootstrap v3.3.6.

Project Structure

 

Figure 1 Project Structure

Running result

Figure 1 running result: Large Mode

Index.html

<! DOCTYPE html> <! -- [If lt IE 7]> 
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'); }});
The above content is the AngularJS Modal Dialog Box introduced by xiaobian. I hope it will help you!
Articles you may be interested in:

 

 
  
Angularjs client compresses image files and uploads instances
 
  
AngularJS + Node. js for online chat rooms
 
  
AngularJS and bootstrap are combined to achieve dynamic loading of pop-up prompt content
 
  
How to Use angularjs and ajax
 
  
Introduction to $ http service usage in AngularJS
 
  
Learn how to use AngularJS File Upload Control
 
  
AngularJs pop-up modal box (model)