AngularJS modal dialog box, angularjs Modal

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.