AngularJS：为什么 ng-model 值不在范围变量中更新

Question

我正在使用 jquery timepicker 插件及其 angular 指令。当我从 javascript 重置范围值时，同时范围值不会更新。

我曾尝试对 timepicker 指令文件进行更改，但没有成功。

示例：- 选择开始时间 1:00AM 然后结束时间自动设置为 1:15AM，这是从 JS 文件中的 watch 函数更新的。现在单击重置，值将被删除或输入字段为空白。现在再次选择同一时间凌晨 1:00，结束时间不会自动填充，并且重置也不起作用。

但是，如果我更改之前选择的时间以外的时间，那会有效。

问题：- 输入字段中的重置值看起来已填充但未在角度范围或模型上更新。但是，如果我通过 document.getElementById() 函数检查该值，那么它会向我显示该输入字段内的值。那么为什么这些值没有在角度范围内更新。

要求：-我想在用户点击重置后清空这些字段。当用户第二次选择“同一时间”时，该值应在角度范围和模型中更新。

代码：-

 var app = angular.module('timePicker', ['ui.timepicker']);

app.controller('DemoCtrl',function($scope){
//$scope.startTime = new Date();
$scope.$watch('startTime', function (newValues, oldValues, scope) 
    {

        if( ($scope.startTime != undefined) &&  ($scope.startTime != null) && ($scope.startTime != '') )
            {
                $scope.endTime =  new Date($scope.startTime.getTime() + (15*60*1000));

                console.log($scope.startTime);
                console.log($scope.endTime);
            }   

    });

$scope.$watch('scope', function (newValues, oldValues, scope) 
    {
        console.log("Nothing here");
    });

$scope.resetTime = function()
{
  $scope.startTime = undefined;
  $scope.endTime = undefined;

}


});

我的 Plnker：-Plnker

使用的资源：-

https://github.com/jonthornton/jquery-timepicker 的 Angular 指令在 https://github.com/Recras/angular-jquery-timepicker 上。

Answer 1

问题

您不能在此条件下使用$scope.$watch，因为每当$scope.startTime 值更改时，都会调用$scope.$watch，如果您选择$scope.startTime 值是以前的值，则不会调用以下代码。这就是你遇到这个问题的原因

if( ($scope.startTime !== undefined) &&  ($scope.startTime !== null) && ($scope.startTime !== '') )
                {
                    $scope.endTime =  new Date($scope.startTime.getTime() + (15*60*1000));

                    console.log($scope.startTime);
                    console.log($scope.endTime);
                }   

评论

这个问题只发生在您以前的值上。一旦您更改任何其他值，它就会正常工作。

解决方案

您需要在第一个文本字段中更改为 ng-blur 而不是 $scope.$watch。

固定演示

我已使用ng-blur 解决了您的问题。请看这个Plunker

我的演示也有你的重置功能 :)祝你好运

Answer 2

我使用此代码进行重置解决了这个问题

angular.element('#elementId').timepicker('setTime', null);

使用此代码，模型值也会更新为之前的值。