AngularJS：为什么NG-模型值不在范围内的变量更新 [英] AngularJS : Why ng-model value not updating in scope variable

问题描述

我使用jQuery插件timepicker和角度指令。当我从JavaScript复位的范围值，然后在同一时间范围值不更新。

I am using jquery timepicker plugin and its angular directive. When I reset the the scope values from javascript then for the same time scope value not updating.

我试图做出timepicker指令文件的变化，但没有成功。

I have tried to make changes on timepicker directive file but not succeeded.

示例： - 选择开始时间1:00 AM然后结束时间自动设置为上午1:15它是由JS文件监控功能更新。点击立即复位和值将被删除或输入字段为空。现在，再次选择同一时间凌晨1:00结束时不会自动填充，也复位不起作用。

Example:- Select start-time 1:00AM then end-time automatically sets to 1:15AM which is updated from watch function in JS file. Now click Reset and values would be deleted or input fields would be blank. Now again select the same time 1:00AM the end-time is not filled automatically and also Reset does not work.

但是，这工作如果我改变比previously选择其他时间的时间。

But that works If I change the time other than the previously selected time.

问题： - 输入字段复位值后看起来人口稠密但没有更新的角度范围或模型。但是，如果我通过的document.getElementById（）函数检查值，那么它会显示我的价值它是输入字段中。那么，为什么这些价值不是在角范围内更新。

Problem:- After reset value in input field looks populated but that is not updating on the angular scope or model. But if I check that value through document.getElementById() function then it is displaying me that value which is inside that input field. Then why those value are not updating in angular scope.

要求： - 我要清空复位用户点击后的字段。而第二次，当用户选中同一时间的值应在角范围和模式进行更新。

Requirement:- I want to empty the fields after user click on reset. and for the second time when user select the "same time" the value should be updated in angular scope and model.

code： -

 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

使用的资源： -

<一个href=\"https://github.com/jonthornton/jquery-timepicker\">https://github.com/jonthornton/jquery-timepicker其在角指令是在<一个href=\"https://github.com/Recras/angular-jquery-timepicker\">https://github.com/Recras/angular-jquery-timepicker.

推荐答案

您不能使用 $范围。$看对于这种情况，因为 $范围。$看呼吁每当在 $ scope.startTime 值被改变，如果选择 $ scope.startTime 值是previous值，那么这个低于code不是called.This就是为什么你有这个问题。

Problem

You cant use $scope.$watch for this condition, because the $scope.$watch is calling for whenever the $scope.startTime value is changed, If you select $scope.startTime value is a previous value, then this below code is not called.This is why you got this problem

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

审核

此问题只与你的previous value.Once您更改任何其他值，那么它的工作好发生。

Review

This issue only happen with your previous value.Once you change any other value then it's working good.

您需要更改为 NG-模糊而不是 $范围。$看在你的第一个文本域。

You need change to ng-blur instead of $scope.$watch in your first text field.

我已使用 NG-模糊解决您的问题。请参阅本 Plunker

I have solved your issue by using ng-blur. Please see this Plunker

的也是我演示有工作的重置功能的：）好运

这篇关于AngularJS：为什么NG-模型值不在范围内的变量更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！