J’utilise le plugin jquery timepicker et sa directive angular. Lorsque je réinitialise les valeurs de javascript de la scope, la valeur de la scope n’a pas été mise à jour pour le même temps.
J’ai essayé d’apporter des modifications au fichier de directive timepicker, mais sans succès.
Exemple: – Sélectionnez l’heure de début 1:00 puis l’heure de fin est automatiquement réglée sur 1:15 qui est mis à jour à partir de la fonction de surveillance dans le fichier JS. Maintenant, cliquez sur Réinitialiser et les valeurs seraient supprimées ou les champs de saisie seraient vides. Maintenant, sélectionnez à nouveau la même heure à 1:00 heure du matin, l’heure de fin n’est pas renseignée automatiquement et la réinitialisation ne fonctionne pas non plus.
Mais cela fonctionne si je change l’heure autre que l’heure précédemment sélectionnée.
Problème: – Après la réinitialisation, la valeur dans le champ de saisie semble remplie mais ne se met pas à jour sur la scope ou le modèle angular. Mais si je vérifie cette valeur à l’aide de la fonction document.getElementById (), elle affiche alors cette valeur qui se trouve à l’intérieur de ce champ de saisie. Alors pourquoi ces valeurs ne sont pas mises à jour dans la scope angular.
Condition préalable: – Je souhaite vider les champs après avoir cliqué sur réinitialiser. et pour la deuxième fois lorsque l’utilisateur sélectionne la “même heure”, la valeur doit être mise à jour dans la scope angular et le modèle.
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; } });
Mon Plnker: – Plnker
Ressources utilisées: –
https://github.com/jonthornton/jquery-timepicker dont la directive en angular se trouve sur https://github.com/Recras/angular-jquery-timepicker .
Vous ne pouvez pas utiliser $scope.$watch
pour cette condition, car la $scope.$watch
$scope.startTime
chaque fois que la valeur $scope.startTime
est modifiée. Si vous sélectionnez la valeur $scope.startTime
est une valeur précédente, le code ci-dessous est alors non appelé. C’est pourquoi vous avez ce problème
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); }
Ce problème ne se produit qu’avec votre valeur précédente. Une fois que vous modifiez une autre valeur, elle fonctionne correctement.
Vous devez modifier ng-blur
au lieu de $scope.$watch
dans votre premier champ de texte.
J’ai résolu votre problème en utilisant ng-blur
. S’il vous plaît voir ce Plunker
ma démo fonctionne aussi avec la fonctionnalité de réinitialisation 🙂 bonne chance
J’ai résolu ce problème en utilisant ce code pour réinitialiser
angular.element('#elementId').timepicker('setTime', null);
Avec ce code, la valeur du modèle est également mise à jour avec la valeur précédente.