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