Question

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

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

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

我在GitHub上发现了一些类似的问题（https://github.com/angular-ui/bootstrap/issues/808，https://github.com/angular-ui/bootstrap/issues/784），但没有一个解决方案解决了这个问题。

有什么想法吗？

Answer 1

之前我遇到过类似的问题！这些东西总让我发疯。在Angular中，数据绑定的工作方式以及视图的更新方式并没有得到很好的记录。但我学到的一件事是，每当你尝试使用Angular不支持的东西更新视图时，你想要观察值正在改变的变量，这样每次值发生变化时，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;
    }
}

希望这有帮助！

Answer 2

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

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

然后在你的html更改引用来自＆＃34; dt＆＃34; to＆＃34; form.dt＆＃34;。正如Misko所说，如果你有一个没有圆点的ng模型，那你就错了。

祝你好运，

杰里

Answer 3

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

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

Datepicker不会更新ng-model

3 个答案: