Nasıl içindeki verileri işlenirken Açısal yönergesi $watch bir değişken (örneğin, ekleme veya çıkarma veri) tetik, ama bu değişken için yeni bir nesne atamak değil miyim?

Basit bir veri kümesi şu anda bir JSON dosyasından yüklenen var. Açısal benim denetleyicisi bu gibi birkaç fonksiyon tanımlamak:

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() {

    };
});

Düzgün $scope.add fonksiyonu <button> bir ben var, ve yeni bir nesne düzgün $scope.data kümesine eklenir. Vurduğum her zaman güncelleme mi kurdunuz bir tablo "Ekle" düğmesine basın.

<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>

Ancak, $scope.data izlemek için ayarlanmış ayarlanmış bir Direktif bu durumda işten değil.

Ben HTML kartımı tanımlayın:

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

Şu yönergeyi (soru, aklı kesilmiş) ile ilişkili:

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

Başında "I see a data change!" anladım, ama asla vurdum sonra "" düğmesine basın. ekleyin

Nasıl sadece/data nesne nesneleri kaldırma ekliyorum $watch olay, data nesneye atamak için tamamen yeni bir veri kümesi elde tetikleyebilir miyim?

Derin kirli nesne denetimi etkinleştirmeniz gerekir. Varsayılan olarak açısal sadece üst seviye başvuru saati değişkeni denetler.

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

Scope bkz. İzleme fonksiyonu $üçüncü parametre true olarak ayarlanmışsa, derin kirli kontrol sağlar.

Al derin kirli kontrol olduğunu unutmayınpahalı. Eğer öyleyse sadece çocuk data tüm değişken yerine dizi izlemek için gerekiyorsa, doğrudan değişkeni izle.

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

sürüm 1.2.x $watchCollection tanıttı

Sığ bir nesnenin özelliklerini ve bu özelliklerin herhangi bir değişiklik olduğunda harekete (diziler için, bu dizinin öğeleri izlemek anlamına gelir; nesne Haritalar için, bu özellikleri izlemek anlamına gelir) izliyor

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