GUI 프로그램 개발 과정에는 종종 모달 대화 상자와 비 모달 대화 상자의 개념이 있습니다.
모달 대화 상자 : 자식 인터페이스 활동 중에는 상위 창이 메시지에 응답 할 수 없습니다. 독점 사용자 입력
비 모달 대화 상자 : Windows 간의 영향이 없습니다
주요 차이점 : 비 모달 대화 상자는 메시지 루프를 앱과 공유하며 사용자를 독점적으로 점유하지 않습니다.
모달 대화 상자는 독점적으로 사용자 입력을 차지하며 다른 인터페이스는 응답 할 수 없습니다.
이 기사의 내용
Angular JS 구현 패턴 대화 상자. AngularJS v1.5.3 및 부트 스트랩 v3.3.6을 기반으로합니다.
프로젝트 구조
그림 1 프로젝트 구조
실행 결과
그림 1 작동 결과 : 큰 모드
index.html
<! docType html> <!-[LT IE 7]> <html> <! 8]> <!-> <html> <!-<!-<!-<! [endif]-> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "eat = edge, chrome = 1"> <meta name = "viewport"contment = "width ="device-width "> angularj> modulal box box Rel = "Stylesheet"href = "../ src/vendor/bootstrap/dist/css/bootstrap.css"> </head> <body ng-app = "myApp"> <! <!-modal template-> <script type = "text/ng-template"id = "myModelContent.html"> <h3> h3> H3> box box. </div> <li div> <ul> <li ng-repeat = "항목의 항목"> <a ng-click = "selected.item = item"> {{item}} </a> </a> </a> </li> <div> 현재 선택된 : <b> {{selected.item}} </b> </ul> <bultion ng-click = "ok ()"> 확인 </button> <button ng-click = "cance ()"> exit </button> </script> <div> Angularjs modal 대화 상자 </div> <섹션> <섹션 ng-controller = "modaldemo"style = "margin : 40px auto; float : none; #fff; padding : 30px; ng-click = "open ( 'lg')"> massive modal </button </button> <button ng-click = "open ()"> modal </button> <button ng-click = "open ( 'sm')" "> small modal </button> <hr> <div ng-show ="selected "> 현재 선택 : {{spection> <! <! src = "../ src/vendor/angular/angular.js"> </script> <script src = "http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootspap-tpls.js "> <cript> <cript 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 = [ 'AngularJ', 'backbone', 'canjs', 'ember', 'click'; function (size) {var modalinstance = $ modal.open ({templateUrl : 'myModelContent.html', 컨트롤러 : 'modalinstancectrl', // modal 크기에 대한 지정 : size : {items : function () {return $ scope.items}}); modalinstance.result.then (selectedItem) {$ scope.Selected = selectionEm;}, function () {$ log.Info ( ' + new Date ())}) // modal controller.controller ('modalinstancectl ', $ scope, airtmal, remblice); = $ scope = {$ scope.Items [0];위의 내용은 편집자가 소개 한 AngularJS 모달 대화 상자입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!