앵귤러 JS 모달 윈도우 기능

앵귤러 JS에 초보자. 모달 창 시나리오로 고생. 다음은 내 응용 프로그램의 간단한 시나리오입니다.앵귤러 JS 모달 윈도우 기능

"새로 추가"버튼이있는 방문 홈 페이지에서 새로 추가 버튼을 클릭하면 긴 양식을 가진 모달 창이 열립니다. 다음은 내가 직면 한 내 질문/문제입니다.

"새로 추가"버튼을 처음 클릭하면 모달 창이 열립니다. 오른쪽 상단의 "십자가"이미지를 사용하여 이미지를 닫은 다음 다시 열면 이미지가 전혀 열리지 않습니다. 스택 오버플로에 이미 게시 된 몇 가지 스레드를 통해 갔지만 아무것도 실제로 도움이되었습니다. 또한 각도 문서에서 많은 부분을 이미 검색하고 읽었지만 Angular 문서는 Angular JS가있는 전문가를 대상으로 한 것 같습니다.
둘째, 모달 창이 기능하도록 만드는 데 도움이 필요합니다. 모달 창에 길이가 긴 양식이 있습니다. "저장"버튼, "닫기"버튼 & "삭제"버튼이 있습니다. 나는 구체적으로 알고 싶습니다.
- 기본 랜딩 페이지 템플릿 html (home.html) 또는 모달 창 템플릿 html (createNewRI.html)에서 폼 태그를 넣어야하는 위치는 어디입니까? 그리고 모달 창에서 양식을 처리하려면 어떻게해야합니까?
- 내 모달 창 양식에서 저장 버튼을 클릭 할 때마다 혼란스러운 "범위"문제가 처리되는지 어떻게 확인합니까? 방법

랜딩 페이지 템플릿 (home.html을)

{.............. 
.............. 
<div class="pull-right"> 
    <button type="button" class="btn btn-primary btn-with-text" ng-click="addModalOpen = true"> 
    <span class="glyphicon glyphicon-plus"></span> Add New Item 
    </button> 
</div> 
............ 
.......... 
<form name="createRIForm" class="form-horizontal col-sm-6"> 
    <div ng-controller="AddCtrl" class="modal fade" ng-include="'createNewRI.html'" ng-class="{'in' : $parent.addModalOpen}"> 
</div></form> 
....... 
....... End of the main landing page i.e., home.html }

모달 창 템플릿 HTML (createNewRI.html)

............... 
........... 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" ng-click="$parent.addModalOpen = false">&times; </button> 
     <h4 class="modal-title" id="myModalLabel">Create New Item</h4> 
    </div> 
    <div class="modal-body"> 
     ...modal body contains around 25 fields .... 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save</button> 
     <button type="button" class="btn btn-primary">Delete</button> 
    </div>   
    </div> 
</div> 

}

어떤 도움을 I로 즉시 나에게 도움이 될 것입니다 이걸로 아주 심하게 붙어 있습니다. 누구든지 내 코드 스 니펫 당 위의 코드 스 니펫으로 나를 도울 수 있습니까?

출처

2014-04-16 user3542818

jsbin을 제공 할 수 있습니까? –

모달의 현재 상태를 저장하는 것을 방해하지 않고 열어서 닫을 수 있습니다. 여기 내 시도이다 (나는이 방법을 여러 번 사용했지만,이 특정 코드가 안된) :

HTML, 버튼 클릭에 showModal을 변경하고 양식에서 ng-class을 제거 :

<div class="pull-right"> 
    <button type="button" class="btn btn-primary btn-with-text" ng-click="showModal()"> 
    <span class="glyphicon glyphicon-plus"></span> Add New Item 
    </button> 
</div> 
.......... 
<form name="createRIForm" class="form-horizontal col-sm-6"> 
    <div ng-controller="AddCtrl" class="modal fade" ng-include="'createNewRI.html'"> 
</div></form>

각도 :

// In the controller 
$scope.showModal = function() { 
    $(".modal").modal("show"); 
}

모달, 그냥를 사용하도록 변경:

<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal">&times;</a> 
     <h4 class="modal-title" id="myModalLabel">Create New Item</h4> 
    </div> 
    <!-- DELETED FOR BREVITY --> 
</div>

출처

2014-04-16 21:52:45

앵귤러 JS 모달 윈도우 기능

답변

관련 문제