권장 읽기 : AngularJS 모달 대화 상자에 대한 자세한 설명
$ Modal은 Modal Windows를 신속하게 만들고 페이지의 일부, 컨트롤러를 만들고 연결할 수있는 서비스입니다.
$ Modal에는 하나의 메소드 오픈 (옵션) 만 있습니다.
TemplateUrl : 모달 창의 주소
템플릿 : HTML 태그를 표시하는 데 사용됩니다
범위 : 모달 범위가있는 컨텐츠 사용 (실제로 $ Modal은 현재 범위의 하위 스코프를 생성합니다)은 기본적으로 $ rootscope입니다.
컨트롤러 : $ modal에 지정된 컨트롤러는 $ modalinstance를 주입 할 수있는 $ 스코프를 초기화합니다.
해결 : 멤버를 정의하고 $ modal이 지정된 컨트롤러로 전달하십시오. 노선의 재하는 속성과 동일합니다. 객체 객체를 통과 해야하는 경우 Angular.copy ()를 사용해야합니다.
배경 : 배경 제어, 허용 가능한 값 : true (기본값), 거짓 (배경 없음), "정적" - 배경이 존재하지만 모달 창 밖에서 클릭하면 모달 창이 닫히지 않습니다.
키보드 : ESC가 눌렀을 때, 모달 대화 상자가 닫혀 있는지, 기본적으로 ture
WindowClass : 클래스를 지정하여 모달 창에 추가하십시오.
열기 메소드는 다음 속성이있는 모달 인스턴스를 반환합니다.
닫기 (결과) : 모달 창을 닫고 결과를 전달합니다
해고 (이유) : 모달 방법을 취소하고 이유를 전달하십시오
결과 : 모달 창이 닫히거나 취소되었을 때 통과되는 계약
개방 : 계약, 모달 창이 열리고 내용이로드되면 변수가 통과됩니다.
또한 $ modalinstance는 두 개의 메소드를 확장하여 $ 닫기 (결과), $ dismiss (이유)를 쉽게 닫고 추가 컨트롤러가 필요하지 않습니다.
HTML
<! docType html> <html ng-app = "modaldemo"> <head> <title> </title> <link href = "lib/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "lib/angular.min.js"> src = "lib/bootstrap-gh-pages/ui-bootstrap-tpls -... min.js"> </script> <스크립트 src = "lib/angular/in/angular-locale_zh-cn.js"> </script> </head> <body> <div ng-controller = "modaldemoctrl"> modaldemoctrl "> modaldemoctrl"> id = "mymodalcontent.html"> <div> <h> 나는 모달입니다! </h> </div> <ly div> <ul> <li ng-repeat = "항목의 항목"> <a ng-click = "selected.item = item"> {{item}} </a> </li> </ul> selected : <b> {selected}} </div> <div> <button ng-click = "ok ()"> ok </button> <button ng-click = "cance ()" "cance </button> </div> </script> </script> <button ()"> var modaldemo = angular.module ( 'modaldemo'); var modaldemoctrl = function ($ scope, $ modal, $ log) {$ scope.Items = [ 'item', 'item', 'item']; $ scope.open = function () {var modalinstance = $ modal.open ({templateUrl : 'myModalContent.html', 컨트롤러 : modalinstancectrl, resolve : {items : intoct : {return $ scope.Items;}}}); modalinstance.opened.then (function () {// 모달 창이 열린 후 실행 된 함수 및 console.log ( 'modal이 열렸습니다');}); modalinstance.result.then (function (result) {console.log (result);}, function (console.log (이유); // 빈 영역을 클릭하면 배경 클릭이 항상 출력됩니다. 클릭이 취소되며 여름은 $ log.info ( ' + new Date ()); }); }; }; var modalinstancectrl = function ($ scope, $ modalinstance, items) {$ scope.items = items; $ scope.selected = {item : $ scope.Items []}; $ scope.ok = function () {$ modalinstance.close ($ scope.Selected); }; $ scope.cancel = function () {$ modalinstance.dismiss ( 'cancel'); }; }; </script> </body> </html>위는 편집자가 소개 한 AngularJS 팝업 모드 상자 (모델)의 관련 내용입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!