jquery - AngularJS : Why ng-model value not updating in scope variable

Question

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

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

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

但是，如果我更改之前选择的时间以外的时间，则该方法有效。

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

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

代码:-

 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 code> 值已更改，如果您选择 $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

我的演示也可以使用您的重置功能 :)祝你好运