当前位置: 首页 > 面试题库 >

$ watch'ing Angular指令中的数据更改

苏野
2023-03-14
问题内容

$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


问题答案:

您需要启用深对象脏检查。默认情况下,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,则启用深度脏检查。

请注意,进行深层脏污检查非常 昂贵 。因此,如果您只需要监视children数组而不是整个data变量,则可以直接监视该变量。

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

版本1.2.x引入了$
watchCollection

Shallow监视对象的属性,并在任何属性更改时触发(对于数组,这意味着监视数组项;对于对象映射,这意味着监视属性)

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


 类似资料:
  • 考虑以下mips代码段 我知道指令1和2之间的$t1上存在WAW数据危险,但第1行是否存在战争危险,因为我们在一条指令中读取和写入$t1?

  • 数据传输指令 它们在存贮器和寄存器、寄存器和输入输出端口之间传送数据. 1. 通用数据传送指令. MOV 传送字或字节. MOVSX 先符号扩展,再传送. MOVZX 先零扩展,再传送. PUSH 把字压入堆栈. POP 把字弹出堆栈. PUSHA 把AX,CX,DX,BX,SP,BP,SI,DI依次压入堆栈. POPA 把DI,SI,BP,SP,BX,DX,CX,AX依次弹出堆栈. PUSHAD

  • 问题内容: 我一直在尝试定义指令,以便可以根据字段的类型及其参数(存储在数据库中)以表格形式显示不同的“窗口小部件”。我需要对不同类型的场景做出反应,因此需要使用指令来处理布局。 在玩一些示例时,我想出了 kinda 可以工作的代码: HTML 指示 这似乎可行(尽管明显比* proper * angularJS变量绑定要慢),但我认为必须有更好的方法来做到这一点。谁能阐明这件事? 问题答案: 我

  • 问题内容: 我需要根据屏幕分辨率更改templateURL,例如,如果我的屏幕宽度小于768px,则必须加载“ templates / browse-content- mobile.html”;如果屏幕宽度大于768px,则必须加载“ templates / browse-content” .html”。 当前使用的代码。 在这里我正在尝试此代码 此代码块正常工作,它根据那里的分辨率加载移动和桌面

  • 问题内容: 将一个类添加到元素时,我想向该元素添加另一个类。当一个类被删除时,我想删除一个元素。我基本上是将一些引导程序类映射到某些角度形式验证类,但是当从元素中添加/删除一个类时,我无法弄清楚如何触发我的代码(还要确保不要引起类更改的无限循环) 。 到目前为止,这是我的指令的内容: 因此,基本上,当添加到元素时,我想将bootstrap类添加到父元素。何时删除,我想删除。 我想在Angular中