watch监听第一次生效第二次不生效_javascript – $watch第二次没有触发值更改

使用AngularJS,我试图在一个指令中观察一个元素的scrollHeight(隐藏在两个表中).这种行为很奇怪;第一次值改变时,它会触发我的功能.它第二次没有,然后它的效果很好……

我正在观看的scrollHeight是在一张双人桌内：

Show Row

Show Cell Watch that

我的指示是看它：

myApp.directive('tracker', function() {

return {

compile : function(elem, attr, linker) {

return function(scope, elm, attrs) {

scope.$watch(function(){ return elm[0].scrollHeight }, function(){

console.log(elm[0].scrollHeight);

});

};

}

}

});

我做了一个plunker来说明这种行为.如果您打开控制台,您将看到以下内容：

>我观看的单元格正在初始化,你得到第一个scrollHeight(29)

>您单击“显示行”并显示控制台中的元素(因此您可以检查scrollHeight值)并触发$watch并显示更新的值(0) – 这是正确的,元素的scrollHeight为0

>现在你点击’显示单元格’然后你得到了元素(scrollHeight已经改变了(29))但是$watch没有触发该函数！？！ – 只有当您再次单击“显示单元格”时才会触发它并显示错误的值29！

每当我的’Watch that’被显示时我都需要检测,但由于这一点,这是不可能的.

解决方法:

你可以使用ng-if而不是ng-show来解决这个问题,添加和删除DOM会改变运行摘要周期,&在消化循环监视被调用之后,然后正确计算元素的高度.

标记

Show Cell

Watch that

标签：javascript,angularjs

来源： https://codeday.me/bug/20190708/1400175.html