$ surveiller les changements de données dans une directive angulaire

Comment puis-je déclencher une $watchvariable dans une directive angulaire lors de la manipulation des données à l'intérieur (par exemple, insérer ou supprimer des données), mais ne pas affecter un nouvel objet à cette variable?

J'ai un ensemble de données simple en cours de chargement à partir d'un fichier JSON. Mon contrôleur angulaire fait cela, ainsi que définir quelques fonctions:

App.controller('AppCtrl', function AppCtrl($scope, JsonService) {
    // load the initial data model
    if (!$scope.data) {
        JsonService.getData(function(data) {
            $scope.data = data;
            $scope.records = data.children.length;
        });
    } else {
        console.log("I have data already... " + $scope.data);
    }

    // adds a resource to the 'data' object
    $scope.add = function() {
        $scope.data.children.push({ "name": "!Insert This!" });
    };

    // removes the resource from the 'data' object
    $scope.remove = function(resource) {
        console.log("I'm going to remove this!");
        console.log(resource);
    };

    $scope.highlight = function() {

    };
});

J'ai un <button>qui a correctement appelé la $scope.addfonction, et le nouvel objet est correctement inséré dans l' $scope.dataensemble. Un tableau que j'ai mis en place est mis à jour chaque fois que je clique sur le bouton «ajouter».

<table class="table table-striped table-condensed">
  <tbody>
    <tr ng-repeat="child in data.children | filter:search | orderBy:'name'">
      <td><input type="checkbox"></td>
      <td>{{child.name}}</td>
      <td><button class="btn btn-small" ng-click="remove(child)" ng-mouseover="highlight()"><i class="icon-remove-sign"></i> remove</button></td>
    </tr>
  </tbody>
</table>

Cependant, une directive que j'ai mise en place pour surveiller $scope.datan'est pas renvoyée lorsque tout cela se produit.

Je définis ma balise en HTML:

<d3-visualization val="data"></d3-visualization>

Qui est associé à la directive suivante (réduite pour la cohérence des questions):

App.directive('d3Visualization', function() {
    return {
        restrict: 'E',
        scope: {
            val: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch('val', function(newValue, oldValue) {
                if (newValue)
                    console.log("I see a data change!");
            });
        }
    }
});

Je reçois le "I see a data change!"message au tout début, mais jamais après que je clique sur le bouton «ajouter».

Comment puis-je déclencher l' $watchévénement lorsque je viens d'ajouter / supprimer des objets de l' dataobjet, sans obtenir un tout nouvel ensemble de données à attribuer à l' dataobjet?

Vous devez activer la vérification approfondie des objets sales. Par défaut, angular vérifie uniquement la référence de la variable de niveau supérieur que vous regardez.

App.directive('d3Visualization', function() {
    return {
        restrict: 'E',
        scope: {
            val: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch('val', function(newValue, oldValue) {
                if (newValue)
                    console.log("I see a data change!");
            }, true);
        }
    }
});

voir Portée . Le troisième paramètre de la fonction $ watch permet de vérifier en profondeur s'il est défini sur true.

Notez que la vérification en profondeur est coûteuse . Donc, si vous avez juste besoin de regarder le tableau des enfants au lieu de la datavariable entière , regardez la variable directement.

scope.$watch('val.children', function(newValue, oldValue) {}, true);

la version 1.2.x a introduit $ watchCollection

Shallow surveille les propriétés d'un objet et se déclenche chaque fois que l'une des propriétés change (pour les tableaux, cela implique de surveiller les éléments du tableau; pour les mappages d'objets, cela implique de surveiller les propriétés)

scope.$watchCollection('val.children', function(newValue, oldValue) {});

Parce que si vous voulez déclencher vos données en profondeur, vous devez passer le 3ème argument truede votre auditeur.Par défaut, c'est falseet il me semble que votre fonction déclenchera, uniquement lorsque votre variable changera et non son champ .

Ma version pour une directive qui utilise jqplot pour tracer les données une fois qu'elles deviennent disponibles:

    app.directive('lineChart', function() {
        $.jqplot.config.enablePlugins = true;

        return function(scope, element, attrs) {
            scope.$watch(attrs.lineChart, function(newValue, oldValue) {
                if (newValue) {
                    // alert(scope.$eval(attrs.lineChart));
                    var plot = $.jqplot(element[0].id, scope.$eval(attrs.lineChart), scope.$eval(attrs.options));
                }
            });
        }
});