$ watch'ing在一个角指令数据的变化 [英] $watch'ing for data changes in an Angular directive

问题描述

我怎么能操纵的时候里面的数据（例如，插入或删除数据），而不是一个新的对象分配给触发的角度指令中 $观看变量变量？

我有一个简单的数据集目前正在从JSON文件加载。我的角控制器做到这一点，并定义了几个功能：

  App.controller（'AppCtrl'，功能AppCtrl（$范围，JsonService）{
    //加载初始数据模型
    如果（！$ scope.data）{
        JsonService.getData（功能（数据）{
            $ scope.data =数据;
            $ scope.records = data.children.length;
        }）;
    }其他{
        的console.log（我已有的数据...+ $ scope.data）;
    }    //将资源的数据对象
    $ scope.add =功能（）{
        $ scope.data.children.push（{名：插入这个！}）;
    };    //从'数据'对象删除资源
    $ scope.remove =功能（资源）{
        的console.log（我要删除此！）;
        的console.log（资源）;
    };    $ scope.highlight =功能（）{    };
}）;
 

我有一个＆LT;按钮＆GT; ，适当称为 $ scope.add 功能，新对象正确插入 $ scope.data 集。我已经建立了一个表，它逐一我打的添加按钮时更新。

 ＆LT;表类=table表条纹表浓缩＆GT;
  ＆LT;＆TBODY GT;
    ＆LT; TR NG重复=孩子data.children |过滤器：搜索|排序依据：'名'＆GT;
      ＆LT; TD＆GT;＆LT;输入类型=复选框＆GT;＆LT; / TD＆GT;
      ＆所述; TD＆GT; {{child.name}}＆下; / TD＆GT;
      ＆LT; TD＆GT;＆LT;按钮类=BTN BTN-小NG点击=删除（子）NG-鼠标悬停=高亮（）＆GT;＆LT; I类=图标 - 去掉符号＆GT; ＆LT; I＆GT /;删除＆LT; /按钮＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

不过，指令集我设置了观看 $ scope.data 当这一切发生的不被解雇了。

我定义我的标记在HTML中：

 ＆LT; D​​3-VAL可视化=数据＆GT;＆LT; / D3的可视化和GT;
 

这是与下面的指令（修剪问题明智的判断力）相关联的：

  App.directive（'d3Visualization'，函数（）{
    返回{
        限制：'E'，
        范围： {
            VAL：'='
        }，
        链接：功能（范围，元素，ATTRS）{
            范围。$表（VAL，功能（为newValue，属性oldValue）{
                如果（newValue）以
                    的console.log（我看到一个数据的变化！）;
            }）;
        }
    }
}）;
 

我得到在一开始的我看到一个数据的变化！消息，但从来没有作为后我打的添加按钮。

我怎么能当触发我只是添加/删除从数据对象对象 $观看事件，没有得到一个全新的数据分配到数据对象？

解决方案

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

  App.directive（'d3Visualization'，函数（）{
    返回{
        限制：'E'，
        范围： {
            VAL：'='
        }，
        链接：功能（范围，元素，ATTRS）{
            范围。$表（VAL，功能（为newValue，属性oldValue）{
                如果（newValue）以
                    的console.log（我看到一个数据的变化！）;
            }，真正的）;
        }
    }
}）;
 

请参见范围。在$表函数的第三个参数使深脏检查，如果它设置为true。

注意到，深脏检查为昂贵。所以，如果你只需要看着孩子阵列，而不是整个数据变量表变量直接。

  $范围手表（'val.children'，功能（为newValue，属性oldValue）{}，真）。
 

版本1.2.x版本推出<一个href=\"https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection\">$watchCollection

  

浅手表的对象，每当任何属性的改变火的属性（数组，这意味着看数组项;对于对象映射，这意味着看属性）

  $范围watchCollection（'val.children'，功能（为newValue，属性oldValue）{}）。
 

How can I trigger a $watch variable in an Angular directive when manipulating the data inside (e.g., inserting or removing data), but not assign a new object to that variable?

I have a simple dataset currently being loaded from a JSON file. My Angular controller does this, as well as define a few functions:

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

    };
});

I have a <button> that properly called the $scope.add function, and the new object is properly inserted into the $scope.data set. A table I have set up does update each time I hit the "add" button.

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

However, a directive I set set up to watch $scope.data is not being fired when all this happens.

I define my tag in HTML:

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

Which is associated with the following directive (trimmed for question sanity):

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 get the "I see a data change!" message at the very beginning, but never after as I hit the "add" button.

How can I trigger the $watch event when I'm just adding/removing objects from the data object, not getting a whole new dataset to assign to the data object?

解决方案

You need to enable deep object dirty checking. By default angular only checks the reference of the top level variable that you watch.

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

see Scope. The third parameter of the $watch function enables deep dirty checking if it's set to true.

Take note that deep dirty checking is expensive. So if you just need to watch the children array instead of the whole data variable the watch the variable directly.

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

version 1.2.x introduced $watchCollection

Shallow watches the properties of an object and fires whenever any of the properties change (for arrays, this implies watching the array items; for object maps, this implies watching the properties)

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

这篇关于$ watch'ing在一个角指令数据的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！