Question

我正在使用ui-date组件作为AngularJS项目中的下拉日期选择器。我遇到的问题是模型和日期选择器之间的数据绑定只是单向的，而不是像我预期的那样双向。

我的HTML有一个Prev和Next按钮，允许用户向后调整日期，一次调整一天。或者他们可以单击日期框本身来显示下拉日期选择器并指定他们想要的任何日期。

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">

使用Javascript：

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
    }
});

问题：

如果使用下拉日期选择器更改日期，则日期框将更改，{{ 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
}

AngularJS数据绑定不适用于ui-date组件

1 个答案: