带有 Bootstrap-Datepicker 的 Angularjs：输入未被主动识别

Question

我正在尝试使用bootstrap-datepicker 创建一个AngularJS 应用程序。

这是我的 HTML：

<div id="test" class="input-append date">
  <input type="text" ng-model="datepicker.date" class="span4">
  <span class="add-on"><i class="icon-th"></i></span>
</div>
{{ datepicker.date }}

最后一行用于调试目的。当此页面运行时，日期选择器工作正常并将我选择的任何日期写入input 框中。问题是，当我单击日期时，{{ datepicker.date }} 部分不会显示任何内容，直到我在input 框中手动输入内容。我希望它主动显示我选择的任何日期。

这是一张试图解释正在发生的事情的图片：

如果可能的话，我还想在输入框中输入我自己的输入。任何选定的日期都将简单地添加到输入框中。

Answer 1

请参阅 AngularJS and scope.$apply 和 answer to this related SO question。

您的<input> 绑定到datepicker.date，因此当您通过添加“x”直接更新它时，{{datepicker.date}} 会更新。当您关闭日期选择器时，<input> 不会发生任何更改，因此 AngularJS 不知道重新评估表达式。当日期选择器关闭时，您需要显式调用scope.$apply。