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

Shi*_*mar 7 jquery angularjs angularjs-directive angularjs-scope

我正在使用jquery timepicker插件及其angular指令.当我从javascript重置范围值时,然后同时范围值不更新.

我试图对timepicker指令文件进行更改但未成功.

示例: -选择开始时间1:00 AM然后结束时间自动设置为1:15 AM,这是从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;

}


});
Run Code Online (Sandbox Code Playgroud)

我的Plnker: - Plnker

使用的资源: -

https://github.com/jonthornton/jquery-timepicker,其角度指令在https://github.com/Recras/angular-jquery-timepicker上.

Ram*_*ran 3

问题

您不能用于 $scope.$watch此条件,因为每当值更改 $scope.$watch时都会调用,如果您选择的值是以前的值,则不会调用下面的代码。这就是您遇到此问题的原因$scope.startTime$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);
                }   
Run Code Online (Sandbox Code Playgroud)

审查

此问题仅发生在您之前的值上。一旦您更改任何其他值,它就会正常工作。

解决方案

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

固定演示

我已经通过使用解决了您的问题ng-blur。请看这个笨蛋

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