Datepicker 不更新 ng-model答案

【问题标题】：Datepicker does not update ng-modelDatepicker 不更新 ng-model
【发布时间】：2014-12-01 22:23:08
【问题描述】：

所以，我整理了一个非常简单的日期选择器：

HTML：

<div ng-controller="DatepickerCtrl">

<div style="display:inline-block; min-height:290px;">
    <datepicker min-date="minDate" show-weeks="false" class="well well-lg" ng-model="dt">    </datepicker>
</div>

<p>Date: {{dt}}.</p>

JavaScript：

angular.module('services', ['ui.bootstrap']);
angular.module('services').controller('DatepickerCtrl', function ($scope) {
$scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
});

日期选择器正确加载，但 ng-model 未更新，标记末尾的段落显示“dt”的空白值。

我在 GitHub 上看到了一些类似的问题（https://github.com/angular-ui/bootstrap/issues/808、https://github.com/angular-ui/bootstrap/issues/784），但那里的解决方案都没有解决问题。

有什么想法吗？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angularjs-directive datepicker

【解决方案1】：

我之前遇到过类似的问题！这些东西总是让我发疯。在 Angular 中，数据绑定的工作方式和视图的更新方式并没有得到很好的记录。但是我学到的一件事是，每当您尝试使用 Angular 不支持的东西来更新视图时，您都希望 $watch 其值正在发生变化的变量，以便每次值发生变化时，Angular 都会调用 $digest()它贯穿更改并更新视图。

您可以在此处阅读有关 $watch 的更多信息：https://docs.angularjs.org/api/ng/type/$rootScope.Scope

回到你的情况：

在将要更改的变量上尝试 $watch()（或者，您可以将 $watchGroup 用于多个更改的变量）。例如：

$scope.$watch('minDate'), function(newVal, oldVal, scope){
    if(newVal != oldVal){
        scope.minDate = newVal;
    }
}

希望这会有所帮助！

【讨论】：

我试了一下，似乎没有任何效果。真正奇怪的是： ng-model="dt" 似乎可以在其他元素上工作和更新。例如，如果我使用提供的示例日期输入字段：我可以在更新日期选择器时看到该字段的值。但它不会将日期输出到示例中的
标记。
那是因为 dt 没有在您的服务或控制器中定义！尝试在您的服务中创建一个变量“日期”，并在用户更改日期时更新该变量。然后，将 {{dt}} 替换为 {{date}} 确保您的服务已正确注入您的控制器并在那里正确定义。为了更好地帮助您，请创建一个 plunkr :)
天哪，这很奇怪...它似乎在 Plunkr 中工作...plnkr.co/edit/oMLRpy6xaGxgAHpxKCEI?p=preview ...我不知道为什么...

【解决方案2】：

当我看到 ng-model 引用名称中没有点 (.) 的东西时，我总是很怀疑。如果您的控制器代码有 $scope.dt 将其更改为：

$scope.form = {};
$scope.form.dt = null;

然后在您的 html 中将引用从“dt”更改为“form.dt”。正如 Misko 所说，如果你的 ng-model 没有点，那你就做错了。

祝你好运，

杰瑞

【讨论】：

感谢您的提示！我是 AngularJS 的新手，所以我会记住这一点以供将来参考。也就是说，它似乎并没有解决这里的问题:(

【解决方案3】：

尝试使用该代码，我总是使用 [(ngModel)]：

    <datepicker min-date="minDate" show-weeks="false" class="well well-lg" [(ngModel)]="dt">    </datepicker>

【讨论】：