2016-08-30 3 views
5

입력을 클릭 할 때 팝업 날짜 선택 도구를 만들기 위해 ui-date (https://github.com/angular-ui/ui-date) (jquery 사용자 선택 도구를 확장하는 각도 지시문)를 사용하고 있습니다. 문제는, 그것은 모달 윈도우 (angular-ui) 내부에 있다는 것입니다. 입력 상자를 클릭하면 날짜 선택 도구의 div가 $ 태그가 포함 된 div의 OUTSIDE 인 닫기 태그 바로 아래에 추가됩니다. 따라서 $ 모달 창이 닫히고 DOM에서 제거되면 날짜 선택 도구의 div가 유지됩니다.모달의 각도 ui-date

내가 사업부가 다른 요소에 추가 할 수있는 것이다 JQuery와 또는 UI - 날짜 중 하나에있는 모든 문서를 찾을 수 없습니다, 내장 된 것 같다. 나는이 해결 될 수있는 방법이 확실하지 오전

. 모달이

<body> 

<!-- Modal div has been destroyed upon close --> 

<!-- Date picker div was outside of modal div, so it remains --> 
<div class="date-picker"> 
</div> 

</body> 

폐쇄 된 후

<body> 

<div class="modal"> <!-- This is the modal div which will be created and destroyed --> 
<input type="text" class="input-calendar" id="reason_date" name="reason_date" ng-model="effectiveDate" ui-date="DateOptions" date-input-format date-validation required="required" autocomplete="off" /> 
</div> 

<!-- This is where the date-picker div is appended --> 
<div class="date-picker"> 
</div> 

</body> 

을 따기 일 동안

코드는 희망이 문제를 설명합니다. https://angular-ui.github.io/bootstrap/#/datepicker

나는 당신이 더 나은, 그것은 도움이되기를 바랍니다 정장을 생각 :

+0

당신이 당신의 코드를 게시 할 수 ... $destroy 핸들러에서 $element.remove();을 추가? 당신이하고있는 것이 효과가있는 것처럼 들립니다. – dwbartz

+1

잠깐, jQuery UI 또는 Angular-UI를 사용하고 있습니까? – dwbartz

+1

그래서 jQuery로 무엇을 할 수 있으며 어떤 각도로 나타 납니까? – empiric

답변

0

$modal$destroy 이벤트에 연결하고 요소를 제거하면됩니다. 그래서 모달의 컨트롤러는 $scope을 주입 한 가정 내부 :

$scope.$on('$destroy', function() { 
    $('.date-picker').remove(); 
}); 

모자 팁은 그의 대답에 코멘트에 remove()을 언급 대한 @Gustavo합니다.

그렇지 않은 경우 ui-date 프로젝트의 GitHub에 PR을 제출하십시오. 라인 (172)에 the following code 수정 :

 $element.on('$destroy', function() { 
      $element.datepicker('hide'); 
      $element.datepicker('destroy'); 
     }); 

+0

이 답변의 두 번째 부분은 작동하지 않습니다. $ element는 결코이 시나리오에서 "파괴"되지 않으며 숨겨집니다. 답변의 첫 번째 부분은 컨트롤러 코드 내부에서 돔을 수정 한 이후로 "각도가 아닌"범주에 속합니다. 그러나 나는 다른 솔루션을 생각할 수 없기 때문에 (jquery의 datepicker에 대한 벤더 코드를 수정하여 그 요소가 추가 된 부분을 허용하는 것 외) 나는 이것이 사실 원래 질문에 답하는 것에 동의 할 것이다. – mls3590712

1

왜 여기에 링크가 전혀 JQuery와에 의존 나던하는, 당신은 각 UI 부트 스트랩 날짜 선택기를 사용 해달라고. :)

+0

슬프게도, 이것은 내가 요구 사항을 완벽하게 통제하지 못하는 응용 프로그램을위한 것입니다. – mls3590712

+0

Im jquery의 전문가는 아니지만 다음과 같이 할 수 있습니다. $ (".date-picker") .remove(); –