javascript - $watch element.scrollHeight 未触发

Question

我有一个 div在 td 里面标签(位于 tr 标签内)。这div有一个自定义指令需要 $watch scrollHeight元素的:

<tr ng-show="showRow">
    <td>
      <div my-custom-directive>My very long text</div>
    </td>
</tr>

对于指令:

appDrct.directive('myCustomDirective', [function() {

   return {
       restrict : 'A',
       compile : function(elem, attr, linker) {


          return function(scope, element, attributes) {
             scope.$watch(element[0].scrollHeight, function(){
                console.log('triggered');
             })
          }
       }
    }
}])

showRow变量通过 ng-click 变化.

问题是 $watch即使 scrollHeight 也从未被触发(除了第一次)由于 ng-show 而发生的变化(当 scrollHeight 等于 ng-show 时，false 等于 0)。

我一开始以为是因为我不得不使用$scope.$apply但我不知道把它放在哪里...

Answer 1

您无法查看直接对象引用(您正试图这样做)。您要么监视当前范围的属性(通过以字符串形式提供属性名称)，要么监视返回新值的函数。

将 watch 更改为:

scope.$watch(function(){ return element[0].scrollHeight }, function(){
    console.log('triggered');
});

另一方面，正如评论者所指出的，您应该在 DOM 中使用破折号而不是驼峰式来引用您的指令。