なぜdatepickerの値は変更されませんか？

Question

私はフォーム内に2つの日付ピッカーを持っています。ユーザーが最初の日付を選択すると、2番目の日付ピッカーの最小日付と最大日付を更新する必要があります（選択から1年間）。しかし、私のケースでは、最初と最後の日付は最初の日付ピッカーで日付を選択したときに一度しか更新されません。しかし、私が選択を変更すると、2番目の日付ピッカーは変更された値では修正されません。

HTML：

<div class="form-group"> 
     <label>Model Production Date</label> 
     <input date-picker1 type="text" class="form-control" placeholder="Production Date" ng-model="productionDate"> 
     </div> 
     <div class="form-group"> 
     <label>Next Review Date</label> 
     <input date-picker2 type="text" class="form-control" placeholder="Next Review Date" ng-model="nextReviewDate"> 
     </div> 

のJs：

.directive('datePicker1', function() { 

return function (scope, element, attrs) { 

    element.datepicker({ 
     format: "yyyy/mm/dd", 
     todayHighlight: true, 
     //startDate: stDate || new Date(), 
     //endDate:enDate || new Date(), 
     autoclose: true 
    }); 
    scope.$watch('productionDate', function (newVal, oldVal) { 

     if(newVal){ 
      scope['productionDate'] = newVal; 
     } 
     else{ 
      return; 
     } 
    });   
}; 

}) 



.directive('datePicker2', function() { 

return { 
    restrict: 'A', 
    link: linker, 

} 

function linker(scope, $element, attrs) { 


    scope.$watch('productionDate', function (newVal, oldVal) { 
     console.log('productionDate===='+scope.productionDate); 
     splittedDateString = scope.productionDate.split('/'); 
     stDate = new Date(splittedDateString[0], splittedDateString[1]-1, splittedDateString[2]); 
     enDate = new Date(stDate.getFullYear()+1, splittedDateString[1]-1, splittedDateString[2]); 
     console.log("Start Date = "+stDate); 
     console.log("End Date = "+enDate); 
     $element.datepicker({ 
      format: "yyyy/mm/dd", 
      todayHighlight: true, 
      startDate: stDate || new Date(), 
      endDate:enDate || new Date(), 
      autoclose: true 
     }); 

    });   
}; 

}) 

私は変更stDateとenDate値を見ることができますが、第二日付ピッカーの開始日と終了日が更新されないされるたびに。私は2日間立ち往生しています。助けてください

Answer 1

ディレクティブに値を渡すと、分離スコープが作成されます。ディレクティブのscopeプロパティを使用して、このディレクティブに渡される値の処理方法を定義することができます。

.directive('datePicker2', function() { 

    return { 
     scope: { 
      name: "=", 
     }, 
     link: linker 
    } 

    function linker (scope, element, attrs) { 
     scope.$watch('productionDate', function (newVal, oldVal) { 
      console.log('productionDate===='+scope.productionDate); 
      splittedDateString = scope.productionDate.split('/'); 
      stDate = new Date(splittedDateString[0], splittedDateString[1]-1, splittedDateString[2]); 
      enDate = new Date(stDate.getFullYear()+1, splittedDateString[1]-1, splittedDateString[2]); 
      element.datepicker({ 
       format: "yyyy/mm/dd", 
       todayHighlight: true, 
       startDate: stDate || new Date(), 
       endDate:enDate || new Date(), 
       autoclose: true 
      }); 
      if(newVal){ 
       scope['nextReviewDate'] = newVal; 
      } 
      else{ 
       scope['nextReviewDate'] = setDate(); 
      } 
     }); 
    }; 
}