부트 스트랩 - daterangepicker 날짜 변경에 바인딩을 업데이 트하는 방법?

Question

내 AngularJS 앱과 변수가 변경 될 때마다 시작일과 종료일을 저장하는 데 this plugin을 사용하고 있습니다.

날짜 범위가 변경되면 컨트롤러 메서드를 호출하여 페이지의 데이터를 업데이트 할 수 있습니까? 범위이 방법 호출처럼

:

$scope.updateDataOnDateRangeChange = function(){ 
    // here calling few services to fetch new data for the page 
    // for the selected date range 
} 

가 사용하는 방법을 NG 클릭하거나이 플러그인에 대한 NG 변화 또는 사용자 정의 지시어는?

Answer 1

AngularJS 내에는 ngChange directive이 있으며 설명하는대로해야합니다.

이 지시문을 날짜 입력 요소에 추가하십시오.

Answer 2

jQuery 플러그인을 사용하기위한 기본 절차는 일반적으로 이에 대한 지시문을 작성하는 것입니다. link 콜백 안에서 플러그인을 초기화합니다. 여기에서 jQuery 또는 jQ-Lite 오브젝트, 각도 범위 및 플러그인 콜백으로 요소에 액세스 할 수 있습니다. 타사 코드 내에서 범위를 변경할 때 $.apply()을 uing에 대한 중요한 주석을 참조하십시오

샘플 HTML :

<input my-picker type="text"/> 

Basic 스크립트 개요 : 당신은 다른 속성을 추가하여이 지침을 향상시킬 수

app.directive('myPicker', function ($timeout) { 
    return { 
     link: function (scope, elem, attrs) { 
      $timeout(function() { 
       /* elem is a jQuery or jQ-lite object representing the element*/ 
       elem.daterangepicker({ 
        format: 'YYYY-MM-DD', 
        startDate: '2013-01-01', 
        endDate: '2013-12-31' 
       }, 
       /* not overly familiar with this plugin but this callback 
       should allow you to set angular scopes */ 
       function (start, end) { 
        /* important to do any scope changes within `$.apply()` so angular 
         becomes aware of changes from third party code*/ 
        scope.$apply(function(){ 
         /* do what you need here with angular scope 
         have access to plugin data as well as angular scope*/ 

        }) 
       }); 
      }, 1) 
     } 
    } 

}) 

마크 업을 선택하고 속성을 사용하여 다양한 플러그인 옵션을 설정할 수도 있습니다.