如何监视角指令中的数据变化?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

如何触发$watch当操作内部的数据(例如插入或删除数据)时,变量在角指令中,而不是为该变量分配一个新对象?

我有一个简单的数据集,目前正在从一个JSON文件中加载。我的角度控制器这样做,同时定义了几个函数:

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

提问于
用户回答回答于

只检查您所观察的顶级变量的引用。

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);
scope.$watchCollection('val.children', function(newValue, oldValue) {});
用户回答回答于

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

扫码关注云+社区