$watch'ing для изменений данных в угловой директиве

Как я могу вызвать $watch переменная в директиве Angular при манипулировании данными внутри (например, при вставке или удалении данных), но не назначать новый объект этой переменной?

У меня есть простой набор данных, который в настоящее время загружается из файла JSON. Мой Angular контроллер делает это, а также определяет несколько функций:

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

    };
});

у меня есть <button> что правильно называется $scope.add функция, и новый объект правильно вставлен в $scope.data задавать. Таблица, которую я настроил, обновляется каждый раз, когда я нажимаю кнопку "Добавить".

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

Тем не менее, директива, которую я установил, чтобы смотреть $scope.data не увольняют, когда все это происходит.

Я определяю свой тег в HTML:

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

Который связан со следующей директивой (обрезано для здравомыслия вопроса):

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

Я получаю "I see a data change!" сообщение в самом начале, но не после того, как я нажал кнопку "добавить".

Как я могу вызвать $watch событие, когда я просто добавляю / удаляю объекты из data объект, не получая новый набор данных для назначения data объект?

Источник

3 ответа

Решение

Вам необходимо включить глубокую проверку грязных объектов. По умолчанию angular проверяет только ссылку на переменную верхнего уровня, которую вы смотрите.

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

см. Область применения. Третий параметр функции $ watch включает глубокую грязную проверку, если установлено значение true.

Обратите внимание, что глубокая грязная проверка стоит дорого. Так что если вам просто нужно смотреть массив детей, а не весь data Переменная смотреть непосредственно переменную.

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

версия 1.2.x представила $ watchCollection

Shallow наблюдает за свойствами объекта и запускает всякий раз, когда изменяется любое из свойств (для массивов это подразумевает наблюдение за элементами массива; для карт объектов это подразумевает наблюдение за свойствами)

scope.$watchCollection('val.children', function(newValue, oldValue) {});
Источник

Потому что, если вы хотите активировать свои данные, вам нужно передать 3-й аргумент true вашего слушателя. По умолчанию это false и это означает, что ваша функция сработает, только когда ваша переменная изменится, а не ее поле.

Источник

Моя версия для директивы, которая использует jqplot для отображения данных, когда они станут доступны:

    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));
                }
            });
        }
});
Источник
Другие вопросы по тегам