2015-01-12 4 views
2


입력란 중 하나에서 날짜를 사용하는 동안 AngularJS에서 작업하기 시작했습니다. 이를 위해 Jquery 날짜 선택 도구를 선택했습니다. 하지만 문제는 제가 Jquery date picker를 독립적으로 사용할 때입니다. 제대로 작동합니다. 예 :JQuery DatePicker가 AngularJS 부분에서 작동하지 않습니다.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
    <script> 
     $(function() { 
     $("#datepicker").datepicker(); 
     }); 
    </script> 
</head> 
<body> 
    <p>Date: <input type="text" id="datepicker"></p> 
</body> 
</html> 

그러나 각도 부분 중 하나에서 사용할 때 작동하지 않습니다. 나는 거기에서 일어났던 일이 혼동스러워. 이 일을 도와 줄 수 있어요?

+0

사용 UI 부트 스트랩 http://angular-ui.github.io/bootstrap/#/datepicker – Dieterg

답변

1

돔 조작 지시 제외 각도에서 다른 곳에서는 존재하지 않아야합니다. 각도가 $compile으로 실행되고 요소를 DOM에 삽입하기 때문에 datepicker를 지시문으로 래핑해야합니다.

"use strict"; 
angular.module("App.directives"). 
directive("bootstrapDatepicker", function() { 
    return { 
     // Restrict it to be an attribute in this case 
     restrict: "A", //<div bootstrap-datepicker></div> 
     // responsible for registering DOM listeners as well as updating the DOM 
     link: function(scope, element, attrs) { 
      $(element).datepicker(); 

      scope.$on("$destroy", function(){ 
       element.off(); 
      }); 
     } 
    }; 
}); 

확인이 아웃 : : directive guidethis

+0

필자가 작성한 바로는

날짜 :

및 필요한 모든 종속성이 상위 템플릿에 포함되어 있습니다. –

+0

예, DOM 조작이 부분적인 경우에도 지시문을 사용해야합니다. –

+0

많이 고마워. 잘됐다 !!! 감사합니다 –

0

이 방법

를 호출하려고한다

$ (함수() {$ ("#datepicker") .datepicker();});

이 부분 후로드

+0

내가 그랬어 여기

은 샘플 지침입니다 그래도 결과는 같습니다. –

+0

오류가 있습니까? 또한 개발자 콘솔에서이 $ ("#datepicker")를 사용하여 jquery가 필드를 찾도록 할 수 있습니다. – Janar

관련 문제