我正在尝试使用 AngularJS 指令实现自定义滚动 Pane 组件。在下面jsfiddle example我有一个基本原型(prototype)的例子。
这是我的想法的架构:
指令代码如下:
myApp.directive('lpScrollPane', function factory() {
return {
restrict: 'A',
replace: true,
transclude: true,
template: '<div class="scrollPaneWrapper"><div class="scrollPane" ng-transclude></div><div class="thumbTrack" ></div></div>',
compile: function (tElement, tAttrs) {
var minHeight = 30;
return function (scope, iElement, iAttrs) {
var thumbTrack = angular.element(iElement.children()[1]);
scope.onScrollHeight = function () {
console.log(iElement.children()[0].scrollHeight);
var H1 = iElement[0].offsetHeight;
var H2 = iElement.children()[0].scrollHeight;
if (H2 > H1) {
var trackHeight = Math.round(minHeight + (H1 - minHeight) * (1 - Math.pow((H2 - H1) / H2, 0.8)));
thumbTrack.css({
display: "block",
height: trackHeight + "px"
});
console.log(H2, H1, trackHeight);
} else {
thumbTrack.css({
display: "none"
});
}
};
scope.$watch(function () {
scope.onScrollHeight();
//setTimeout(scope.onScrollHeight, 100)
});
}
}
};
});
基本上有 2 个潜水,1 个 overflow hidden ,一个带有溢出滚动,另一个 div 模仿拇指跟踪器。
我的目标是监控 scrollHeight 属性,然后相应地更改跟踪器高度。问题是 $watch 在渲染 DOM 之前被触发,因此在显示和计算跟踪器时会有延迟。现在我在 watch 函数上使用了 setTimeout 并且它工作正常(取消注释行 35 和注释 34 以查看它的运行情况)。
正确的做法是什么?
最佳答案
参见 is there a post render callback for Angular JS directive?
不幸的是,无法确定渲染何时完成(例如,没有事件)。使用 $timeout 似乎是可用的最佳解决方法。
在上面的链接中,@Nik 在评论中提到他正在针对他的特定场景检查 $('tr').length > 3
以确定渲染何时完成。也许您可以定期检查 DOM 中的某些内容以确定渲染是否已完成。
关于javascript - AngularJS - 如何在指令渲染完成时查询 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14235669/