AngularJS 데이터 바인딩이 ui 날짜 구성 요소와 작동하지 않습니다.

Question

AngularJS 프로젝트에서 드롭 다운 날짜 피커로 ui-date 구성 요소를 사용하고 있습니다. 내가 가지고있는 문제는 모델과 datepicker 사이의 데이터 바인딩이 예상대로 양방향이 아닌 단방향 일 뿐이라는 것입니다.

내 HTML에는 사용자가 한 번에 날짜를 뒤로 및 앞으로 조정할 수있는 이전 및 다음 버튼이 있습니다. 또는 날짜 상자 자체를 클릭하여 드롭 다운 날짜 피커를 표시하고 원하는 날짜를 지정할 수 있습니다.

Plunker here.

HTML :

ThisDate: {{ ThisDate }} 
<p> 
<button ng-click="PrevDay()">&lt; Prev</button> 
<button ng-click="NextDay()">Next &gt;</button> 
<p> 
Set Date: <input ui-date ng-model="ThisDate" id="ThisDate"> 

자바 스크립트 :

var app = angular.module('app', ['ui.date']); 

app.controller('MyController', function($scope) { 
    $scope.ThisDate = new Date(); 

    $scope.PrevDay = function() { 
     $scope.ThisDate = DateOffset($scope.ThisDate, -1); 
    }; 

    $scope.NextDay = function() { 
     $scope.ThisDate = DateOffset($scope.ThisDate, 1); 
    }; 

    function DateOffset(ThisDate, NumDays) { 
     var d = ThisDate; 
     d.setDate(d.getDate() + NumDays); 
     return d 
    } 
}); 

문제 :

드롭 다운 datepicker를 사용하여 날짜를 변경하면 날짜 상자가 변경되고 {{ ThisDate }}이 올바르게 업데이트됩니다. 그러나 이전 또는 다음 버튼을 클릭하면 바인딩 된 {{ ThisDate }} 만 변경됩니다 ... 모델의 "ThisDate"에 바인딩 된 날짜 상자가 아닙니다.

단계 재현하기 :

는 Plunker를 실행합니다. 날짜 상자를 클릭하면 드롭 다운에서 날짜를 변경할 수 있으며 그에 따라 날짜 상자가 변경되며 ThisDate에 바인딩 된 상단의 텍스트 영역도 변경됩니다. 이제 Next 또는 Prev 버튼을 클릭하십시오. 바운드 ThisDate 텍스트 만 변경되며 날짜 상자는 변경되지 않습니다. 날짜 상자는 ThisDate에 바인딩되어 있으므로 변경해야합니다.

ui-date datepicker가 모델의 변경 사항을 ThisDate에 등록하지 않는 이유에 대한 아이디어가 있으십니까?

Plunker here.

Answer 1

그것은 날짜 객체 변화를보고 아니에요. 새 날짜 개체를 할당하면 작동합니다.

function DateOffset(ThisDate, NumDays) { 
    var d = new Date(); 
    d.setTime(ThisDate.getTime() + (NumDays * 1000 * 60 * 60 * 24)); 
    return d 
}