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.
I have tried to make changes on timepicker directive file but not succeeded.
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.
But that works If I change the time other than the previously selected time.
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;
}
});
My Plnker:-Plnker
Resources Used:-
https://github.com/jonthornton/jquery-timepicker whose directive in angular is on https://github.com/Recras/angular-jquery-timepicker.
Q 20 - In AngularJS, Scope contains the model data.
There is no difference between ng-model and data-ng-model if you see in terms of AngularJs. Actually, 'data' used as prefix to validate HTML5 validation. So, it is good practice to use data-ng-model , however, you can use ng-model as well. There is no problem in that also.
In this case, where you need to load templates from other domains or other protocols, then you can add them to your trusted resource URL list, which will set the url as a trusted url in your application. The ng-include directive is executed at priority level -400 and creates new scope every time it is invoked.
ngOnChanges(): "A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes." We use this lifecycle hook to respond to changes to our @Input() variables.
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);
}
This issue only happen with your previous value.Once you change any other value then it's working good.
You need change to ng-blur
instead of $scope.$watch
in your first text field.
I have solved your issue by using ng-blur
. Please see this Plunker
also my demo have working your reset functionality :) good luck
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With