AngularJS: Pourquoi la valeur de ng-model n’est pas mise à jour dans la variable de scope

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 .

Problème

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

La revue

Ce problème ne se produit qu’avec votre valeur précédente. Une fois que vous modifiez une autre valeur, elle fonctionne correctement.

Solution

Vous devez modifier ng-blur au lieu de $scope.$watch dans votre premier champ de texte.

Démo fixe

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.