$ modal에 방법이 있습니다. 개방형 및이 방법의 속성이 소개됩니다.
TemplateUrl : 모달 창의 주소
템플릿 : HTML 태그를 표시하는 데 사용됩니다
범위 : 모달 범위가있는 컨텐츠 사용 (실제로 $ Modal은 현재 범위의 하위 스코프를 생성합니다)은 기본적으로 $ rootscope입니다.
컨트롤러 : $ modal에 지정된 컨트롤러는 $ modalinstance를 주입 할 수있는 $ 스코프를 초기화합니다.
해결 : 멤버를 정의하고 $ modal이 지정된 컨트롤러로 전달하십시오. 노선의 재하는 속성과 동일합니다. 객체 객체를 통과 해야하는 경우 Angular.copy ()를 사용해야합니다.
배경 : 배경 제어, 허용 값 : true (기본값), 거짓 (배경 없음), "정적" - 배경이 존재하지만 모달 창 밖에서 클릭하면 모달 창이 닫히지 않습니다.
키보드 : ESC가 눌렀을 때, 모달 대화 상자가 닫혀 있는지, 기본적으로 ture
WindowClass : 클래스를 지정하여 모달 창에 추가하십시오.
열기 메소드는 다음 속성으로 인스턴스를 반환합니다.
닫기 (결과) : 모달 창을 닫고 결과를 전달합니다
해고 (이유) : 모달 방법을 취소하고 이유를 전달하십시오
결과 : 모달 창이 닫히거나 취소되었을 때 통과되는 계약
개방 : 계약, 모달 창이 열리고 내용이로드되면 변수가 통과됩니다.
또한 $ modalinstance는 두 개의 메소드를 확장하여 $ 닫기 (결과), $ dismiss (이유)를 쉽게 닫고 추가 컨트롤러가 필요하지 않습니다.
<! 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"> </script> src = "lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"> </script> <script src = "lib/angular/i18n/angular-locale_zh-cn.js"> </script> </head> <body> <<<modaldmoctrl "text/ng-template"id = "myModalContent.html"/> <div> <h3> 나는 모달입니다! </h3> </div> <ul> <li ng-repeat = "항목의 항목"> <ang-click = "selected.item = item"> {item}} </a> </a> selected.item}} </b> </div> <div> <button ng-click = "ok ()"> ok </button> <button ng-click = "cance ()"> 취소 </button> </div> </script> <버튼 ng-click = "open ()"> open me! </button> </div> <script> var modaldo = Angular.Module ( 'modaldOmule ('). 'ui.bootstrap']); var modaldemoctrl = function ($ scope, $ modal, $ log) {$ scope.items = [ 'item1', 'item2', 'item3']; $ scope.open = function () {var modalinstance = $ modal.open ({templateUrl : 'mymodalcontent.html', modalinstancectrl, resolve : {items : function () {return $ scope.items;}}); modalinstance.opened.then (function () {// 모달 창이 열린 후 실행 된 기능은 모달 창이 열린 후에 항상 출력됩니다. DATE ());});});};}; var modalinstancctrl = 함수 ($ scope, $ modalinstance, items) {$ scope.Items = items; $ scope.Selected = {item : $ scope.Items [0]}; $ scope.ok = function () {$ modalinStance.close ($ modalinstance.close); function () {$ modalinstance.dismiss ( 'cancel');};}; </script> </body> </html>위는 편집자가 귀하에게 소개 한 Angularjs $ Modal Pop-Up Box 예제 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!