解决无法获取ngRepeat生成元素样式的问题

ng

在使用Angular进行开发的过程中，使用ng-repeat生成多个元素之后，如果元素的宽高是auto，那么我们在使用
css()、getComputedStyle、offsetHeight或者clientHeight都会获取到0，我们无法获取到元素的实际高度。

这是因为DOM的渲染是异步的，导致计算元素属性信息在DOM渲染完成之前就已经完成了，因此无法获取到DOM真正渲染结束之后属性。

在Angular中，我们可以使用以下几种方法进行处理

使用$watch方法来进行脏值检查

当元素信息发生改变之后，将最新的数据赋值给变量即可

例如：

Directive

1
2
3
4
5
6
7
8
9
10
11
12
myApp.directive('heightBind', function() {
  return {
    scope: {
      heightValue: '='
    },
    link: function($scope, $element) {
      $scope.$watch(function() {
        $scope.heightValue = $element.height();
      });
    }
  }
})

HTML

1
< div height-bind height-value="containerHeight"></div>

当然，也可以使用$apply来完成同样的事情

1
2
3
4
 setTimeout(function(){
  $scope.containerHeight = $('#container').height()
  $scope.$apply();
}, 0);

使用自带的脏值检查方法

我们知道，angular的一些方法会自动进行脏值检查，因此我们可以将上面的方法稍微改动一下即可

1
2
3
$timeout(function () {
    // 获取元素信息
});

参考资料 http://stackoverflow.com/questions/25108780/height-of-container-with-ng-repeat-directive-is-zero