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更改等于0当false等于$scope.$apply）时。

我首先想到的是因为我必须使用data = {'bone': {'SEV': 12, 'ER': 16, 'FAM': 177 } } for injury, ward_dict in data.iteritems(): total = float(sum(ward_dict.values())) percentage = [number / total for number in ward_dict.values()] data_out = {injury: {k: v for k, v in zip(ward_dict.keys(), percentage)} } print(data_out)，但我不知道该把它放在哪里......

Answer 1

您无法观看直接对象引用（这是您尝试做的事情）。您要么观察当前范围的属性（通过将属性的名称作为字符串提供），要么观察一个返回新值的函数。

将手表更改为：

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

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

Answer 2

将myCustomeDirective更改为html

中的my-custome-directive

<tr ng-show="showRow">
    <td>
      <div my-custome-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(function(){ return element[0].scrollHeight },
                 function(){
                       console.log('triggered');
                 })
          }
       }
    }
}])

$ watch element.scrollHeight未触发

2 个答案: