Question

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

<table> <tbody> <tr> <td ng-click="show()" style="cursor:pointer">Show Row</td> </tr> <tr> <td> <table ng-show="showRow"> <tbody> <tr> <td ng-click="showTD()" style="cursor:pointer">Show Cell</td> </tr> <tr ng-show="showCell"> <td id="tracker" tracker=""> Watch that</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>我正在观看双人桌：

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

我的观察指示：

scrollHeight

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

我的观看单元格正在初始化，您获得了第一个scrollHeight（29）
点击＆＃39;显示行＆＃39;并且显示控制台中的元素（因此您可以检查$watch值）并触发scrollHeight并显示更新的值（0） - 这是正确的，元素＆＃39; s { {1}}为0
现在点击＆＃39;显示单元格＆＃39;你得到了元素（scrollHeight已经改变了（29））但是$ watch没有触发这个功能！？！ - 只有当您再次点击“显示单元格”时才会这样做。它被触发并显示错误的29值！

每当我的“观看”时，我都需要检测到。得到显示，但由于这一点，这是不可能的。

Answer 1

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

<强>标记

<table ng-show="showRow"> 
   <tbody>
       <tr>
          <td ng-click="showTD()" style="cursor:pointer">Show Cell</td>
       </tr> 
       <tr ng-if="showCell">
          <td id="tracker" tracker=""> Watch that</td>
       </tr>
   </tbody>
</table>

Demo Plunkr

$ watch未在值第二次更改时触发

1 个答案: