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

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

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

• 我的监视单元正在初始化，您将获得第一个 scrollHeight (29)
• 您单击“显示行”并显示控制台中的元素（因此您可以检查scrollHeight 值）并且$watch 被触发并显示更新的值 (0) - 这是正确的，元素的scrollHeight 为 0
• 现在您单击“显示单元格”并获得元素（scrollHeight 已更改 (29)）但 $watch 不会触发该功能！？！ - 只有当您再次单击“显示单元格”时，它才会被触发并显示错误的值 29！

我需要检测我的“手表”何时显示，但正因为如此，这是不可能的。

Answer 1

您可以使用ng-if 而不是ng-show，这样可以解决问题，添加和删除 DOM 会改变运行摘要周期，并且在调用摘要周期 watch 之后，元素的高度会正确计算。

标记

<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