angulaire.js - Comment ng envoie-t-il automatiquement une requête en arrière-plan pour mettre à jour la page en fonction de la valeur de la liaison bidirectionnelle ?

Question

Description de la scène :
Il y a une liste déroulante de sélection du mois sur la page. Cliquez sur la liste déroulante et nous pouvons sélectionner le mois correspondant

.

<select  ng-model="month"></select>

Dans le contrôleur, vous devez vous rendre dans le backend pour obtenir les données correspondantes selon le mois sélectionné

$scope.$watch($scope.month, function(){
       $http({ url:url,method:'GET',withCredentials:true
            }).success(function(data,header,config,status){
                  // do something
            })
});

Mes réflexions :
En supposant qu'il y ait plusieurs listes déroulantes sur la page, utiliser $watch pour surveiller les modifications de $scope une par une n'est pas idéal. Existe-t-il une idée selon laquelle au lieu d'utiliser $watch, lorsque le modèle ng change, le contrôleur envoie automatiquement une requête http pour obtenir les données ?

À la recherche de conseils d'experts~

Answer 1

Votre $watch est mal écrit :

你写成了：    $scope.$watch($scope.month, ...
应该写成：    $scope.$watch('month', ...

La méthode suivante est également très simple :

<select ng-model="year"></select>
<select ng-model="month"></select>
<select ng-model="day"></select>

$scope.changeDo = function(){
    $http({
        url:url,
        method:'GET',
        withCredentials:true
    }).success(function(data,header,config,status){
          // do something
    });
};
$scope.$watch('year', $scope.changeDo);
$scope.$watch('month', $scope.changeDo);
$scope.$watch('day', $scope.changeDo);

Si vous utilisez ng-change, les performances peuvent être meilleures. N'oubliez pas de supprimer le $watch() ci-dessus :

<select ng-model="year" ng-change="changeDo();"></select>
<select ng-model="month" ng-change="changeDo();"></select>
<select ng-model="day" ng-change="changeDo();"></select>

La différence de performances est fondamentalement négligeable. J'ai déjà fait un test similaire, exécuté 1 million de fois, en 1 seconde.
Si je le fais, j'utiliserai la méthode $watch, qui est pratique pour la maintenance ultérieure (la méthode ng-change nécessite de changer le contrôleur et le modèle, tandis que la méthode watch n'a besoin que de changer le contrôleur).

Answer 2

Les listes déroulantes

sont généralement traitées à l'aide de la commande ngChange ngChange

;

Answer 3

ngChange est le meilleur choix. En principe, définissez le moins de files d'attente d'écoute possible, sinon l'efficacité sera très faible.