詳解AngularJS 模態對話方塊

詳解AngularJS 模態對話方塊_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在涉及GUI程式開發的過程中，常常有模態對話方塊以及非模態對話方塊的概念

模態對話方塊：在子介面活動期間，父視窗是無法進行訊息響應。獨佔使用者輸入

非模態對話方塊：各視窗之間不影響

主要區別：非模態對話方塊與APP共用訊息迴圈，不會獨佔使用者。

模態對話方塊獨佔使用者輸入，其他介面無法響應

本文內容

Angular JS 實現強制回應對話方塊。基於 AngularJS v1.5.3 和 Bootstrap v3.3.6。

項目結構

圖 1 項目結構

運行結果

圖 1 運行結果：大模態

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>

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 模態對話方塊，希望對大家有所協助！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More