带有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 }}

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

这是一张试图解释发生了什么的图片：

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

Answer 1

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

您的<input>绑定到datepicker.date，因此当您通过添加“x”直接更新时，{{datepicker.date}}会更新。关闭日期选择器时，不会对<input>进行任何更改，因此AngularJS无法重新评估表达式。当datepicker关闭时，你需要明确地调用scope.$apply。