$regarder un objet

Je veux regarder les changements dans un dictionnaire, mais pour une raison de regarder le rappel n'est pas appelé.

Ici est un contrôleur que j'utilise:

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

    $scope.$watch('form', function(newVal, oldVal){
        console.log('changed');
    });
}

Ici est violon.

J'attends $regarder de rappel pour être déclenché à chaque fois que le nom ou le prénom est changé, mais ça n'arrivera pas.

Quelle est la bonne façon de le faire?

double possible de Comment profonde regarder un tableau dans angularjs?

InformationsquelleAutor Vladimir Sidorenko | 2013-10-18

557

Appel $watch avec true en tant que troisième argument:
```
$scope.$watch('form', function(newVal, oldVal){
    console.log('changed');
}, true);
```
Par défaut lorsque l'on compare deux objets complexes en JavaScript, ils seront vérifiés pour "référence" de l'égalité, qui demande si les deux objets font référence à la même chose, plutôt que de la "valeur" de l'égalité, qui vérifie si les valeurs de toutes les propriétés de ces objets sont égaux.

Par la Angulaire de la documentation, le troisième paramètre est pour objectEquality:

Quand objectEquality == true, l'inégalité de la watchExpression est déterminé en fonction de la angulaire.égal à fonction. Pour enregistrer la valeur de l'objet de la comparaison ultérieure, le angulaire.copie fonction est utilisée. Cela signifie donc que l'observation des objets complexes ont des effets indésirables de la mémoire et de l'incidence sur les performances.
- C'est une bonne réponse, mais j'imagine qu'il ya des moments où vous ne voulez pas de manière récursive regarder un objet
- Il y a des. Par défaut, si vous ne passez pas true, puis il va vérifier pour la référence à l'égalité si l'regardé la valeur est un objet ou un tableau. Dans ce cas, vous devez spécifier les propriétés explicitement, comme $scope.$watch('form.name') et $scope.$watch('form.surname')
- Merci. C'est exactement ce que j'ai raté. Jason, vous avez raison, vous n'avez pas toujours envie récursive des objets à regarder, mais dans mon cas, c'était exactement ce dont j'avais besoin.
- ImmutableJS de référence et de comparaison peut aider à augmenter la performance.
InformationsquelleAutor rossipedia

La form objet ne change pas, seule la name propriété est

mis à jour violon

function MyController($scope) {
$scope.form = {
    name: 'my name',
}

$scope.changeCount = 0;
$scope.$watch('form.name', function(newVal, oldVal){
    console.log('changed');
    $scope.changeCount++;
});
}

InformationsquelleAutor Jason

12

Peu performances de pointe si quelqu'un a une banque de données type de service avec la touche -> valeur de paires:

Si vous avez un service appelé de la banque de données, vous pouvez mettre à jour un timestamp à chaque fois que votre big data de l'objet de modifications.
De cette façon, au lieu de profonde regarder l'ensemble de l'objet, vous êtes seulement en regardant un timestamp pour le changement.
```
app.factory('dataStore', function () {

    var store = { data: [], change: [] };

    //when storing the data, updating the timestamp
    store.setData = function(key, data){
        store.data[key] = data;
        store.setChange(key);
    }

    //get the change to watch
    store.getChange = function(key){
        return store.change[key];
    }

    //set the change
    store.setChange = function(key){
        store.change[key] = new Date().getTime();
    }

});
```
Et dans une directive, vous êtes seulement en regardant le timestamp de changer
```
app.directive("myDir", function ($scope, dataStore) {
    $scope.dataStore = dataStore;
    $scope.$watch('dataStore.getChange("myKey")', function(newVal, oldVal){
        if(newVal !== oldVal && newVal){
            //Data changed
        }
    });
});
```
- Je pense qu'il vaut la peine de mentionner que, dans ce cas, vous feriez perdre la fonctionnalité d'avoir accès à l'ancien de la valeur des données que vous stockez. newVal, oldVal dans cet exemple sont les valeurs timestamp qu'on a pu observer des objets de valeurs. Il ne fait pas de cette réponse non valide, je pense juste que c'est un inconvénient qui est digne de mention.
- Certes, cette méthode je l'utilise surtout quand je veux charger une complexe structure de données en tant que source pour quelque chose (une nouvelle version de certaines données, par exemple). Si je garde sur les nouvelles et les anciennes valeurs, je ne les stockez pas dans les gros objets compliqués, mais j'aurais un petit texte à la représentation de la chose qui me tiennent à cœur et montre que, pour les modifier ou d'y accéder lorsque l'horodatage des changements.
InformationsquelleAutor Ferenc Takacs
5

La raison pour laquelle votre code ne fonctionne pas est parce que $watch par défaut de vérification des références. Donc, en un mot c'assurez-vous que l'objet qui est passé est un nouvel objet. Mais dans votre cas, vous êtes juste la modification de certaines propriétés de l'objet de formulaire pas en créer un nouveau. Afin de faire le travail que vous pouvez passer true comme troisième paramètre.
```
$scope.$watch('form', function(newVal, oldVal){
    console.log('invoked');
}, true);
```
Cela va fonctionner, mais Vous pouvez utiliser $watchCollection qui seront plus efficaces, alors $de regarder parce que $watchCollection vais regarder pour les propriétés de l'objet de formulaire. E. g.
```
$scope.$watchCollection('form', function (newVal, oldVal) {
    console.log(newVal, oldVal);
});
```
InformationsquelleAutor sol4me
4

Que vous êtes à la recherche pour la forme de l'objet de modifications, le meilleur regardant approche consiste à utiliser

$watchCollection. Veuillez regarder dans officiel la documentation pour les différentes caractéristiques de performance.

InformationsquelleAutor Ramesh Papaganti

Essayez ceci:

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

    function track(newValue, oldValue, scope) {
        console.log('changed');
    };

    $scope.$watch('form.name', track);
}

InformationsquelleAutor Tarun

Pour quelqu'un qui veut regarder pour un changement à un objet dans un tableau d'objets, cela semblait fonctionner pour moi (comme les autres solutions sur cette page n'ont pas):

function MyController($scope) {

    $scope.array = [
        data1: {
            name: 'name',
            surname: 'surname'
        },
        data2: {
            name: 'name',
            surname: 'surname'
        },
    ]


    $scope.$watch(function() {
        return $scope.data,
    function(newVal, oldVal){
        console.log(newVal, oldVal);
    }, true);

InformationsquelleAutor Max

-3

vous devez changements dans $la montre ....

function MyController($scope) {
    $scope.form = {
        name: 'my name',
    }

    $scope.$watch('form.name', function(newVal, oldVal){
        console.log('changed');
     
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MyController">
        <label>Name:</label> <input type="text" ng-model="form.name"/>
            
        <pre>
            {{ form }}
        </pre>
    </div>
</div>

Répondant à une vieille de deux ans question avec une réponse qui est presque la copie exacte d'un existant? Pas cool.

InformationsquelleAutor Vijay Patel

Vous devez vous connecter pour publier un commentaire.