133

如何$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对象？

4

3 回答 3

219

您需要启用深度对象脏检查。默认情况下，角度仅检查您观看的顶级变量的引用。

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) {});
于 2012-12-20T21:47:20.047 回答
2

因为如果你想用它来触发你的数据，你必须传递true你的监听器的第三个参数。默认情况下false，它意味着你的函数会触发，只有当你的变量不会改变它的字段时。

于 2015-07-22T16:16:30.930 回答
1

我的指令版本使用 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));
                }
            });
        }
});
于 2013-06-10T09:55:19.230 回答