Angular UI 日期选择器未更新

Question

我尝试使用前一天和第二天按钮扩展 UI 日期选择器。

正如您从 plunker 中看到的那样，我可以使用 datepicker 或 prev/next 按钮更改模型。但是当使用上一个/下一个按钮更改模型时，日期选择器不会更新。

http://plnkr.co/edit/k1flklFny5BoX6zdwyWJ?p=preview

<div class="form-group">
   <div class="input-group">
     <input type="text" class="form-control" 
        datepicker-popup="{{ctrl.format}}" ng-model="ctrl.dt" 
        is-open="ctrl.opened" datepicker-options="ctrl.dateOptions" 
        ng-required="true" close-text="Close" /> 
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="ctrl.open($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
  </div>
</div>

我已经尝试了几种方法（包括 $scope 和演示的控制器作为语法），但它根本不起作用。有什么想法吗？

PS：我非常努力地将上一个按钮、日期选择器、下一个按钮放在一行中，居中，日期选择器占据了它需要的足够空间。如果有人知道如何实现这一点，非常感谢任何帮助。

Answer 1

我不知道为什么，但似乎 ngModel 在 Date 对象改变自身时没有反应。但是，如果您将 Date 的新实例分配给范围属性，它就会改变。

试试这个：

this.prevDay = function() {
    this.dt = getPrevNextDate(this.dt, -1);
};

this.nextDay = function() {
    this.dt = getPrevNextDate(this.dt, 1);
};

function getPrevNextDate(date, increment)
{
  var newDate = new Date();
  newDate.setDate(date.getDate() + increment);
  return newDate;
}

最好将this 缓存到控制器函数顶部的var self = this 等变量中，并使用self 变量而不是this

这样你就可以避免这一行的错误：

$log.log('GET api/v1/person/' + this.person.id + '/entry returned: ' + data.length + ' entries')