Javascript 使用ng repeat时,如何获得图元的正确高度和偏移值?
我正在尝试获取列表项的偏移量和高度。一旦有了这些,我就调用父指令上的函数。最后,当元素进入视图时,这将是输入和输出的过渡元素 问题:因为Javascript 使用ng repeat时,如何获得图元的正确高度和偏移值?,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我正在尝试获取列表项的偏移量和高度。一旦有了这些,我就调用父指令上的函数。最后,当元素进入视图时,这将是输入和输出的过渡元素 问题:因为ng重复(我不知道为什么),el[0]。越位和el[0]。getBoundingClientRect().top值几乎是随机的;除非,否则我会在逻辑周围加上一个$timeout。我认为这是因为样式有时间渲染 问题:如何在不使用$timeout或使用$watch的情况下获得准确的偏移量和高度 HTML: <dt spyed ng-repeat="exp i
ng重复(我不知道为什么),el[0]。越位和el[0]。getBoundingClientRect().top代码>值几乎是随机的;除非,否则我会在逻辑周围加上一个$timeout
。我认为这是因为样式有时间渲染
问题:如何在不使用$timeout
或使用$watch
的情况下获得准确的偏移量和高度
HTML:
<dt spyed ng-repeat="exp in experiences">
...
</dt>
app.directive('spyed', function () {
return {
require: '^scrollSpyer',
link: function(scope, el, attrs, ctrl) {
// this value is mostly random after the $first ng-repeat item
var offset = el[0].getBoundingClientRect().top;
// this value is also mostly randome after the $first ng-repeat item
var theHeight = el[0].offsetHeight;
// this fires the expMapper on parent directive.
ctrl.expMapper(offset, theHeight);
}
};
});
关于为什么不使用观察者的旁注:
我不想使用监视程序的原因是我正在将这些值推送到父指令中的集合。我不想一直重置数组,如果它在每个双向绑定上都持续触发ctrl.expMapper()
,我就必须这样做
父指令:
app.directive('scrollSpyer', function ($window, Experiences) {
return {
controller: function($scope){
$scope.experiences = [];
this.expMapper = function(offset, height) {
$scope.experiences.push({'offset': offset, 'height': height, 'inView': false});
};
},
link: function(scope) {
var i = 0;
angular.element($window).bind('scroll', function() {
if(i < scope.experiences.length) {
if (this.pageYOffset >= scope.experiences[i].offset) {
Experiences.status.push(scope.experiences[i]);
i++;
} else {
console.log('middle');
}
}
scope.$apply();
});
}
};
});
app.directive('scrollSpyer',函数($window,Experiences){
返回{
控制器:功能($scope){
$scope.experiences=[];
this.expMapper=函数(偏移、高度){
$scope.experiences.push({'offset':offset'height':height,'inView':false});
};
},
链接:功能(范围){
var i=0;
angular.element($window.bind('scroll',function()){
if(i<范围、经验、长度){
if(this.pageYOffset>=scope.experiences[i].offset){
经验.地位.推动(范围.经验[i]);
i++;
}否则{
console.log('middle');
}
}
作用域:$apply();
});
}
};
});
使其成为$scope中的函数:
$scope.getOffsets = function () {
//Do your logic here
};
请注意这一小差异:
<dt spyed ng-repeat="exp in experiences" ng-init="$last ? getOffsets(): ''">
...
</dt>
...
ng init on condition to check last index将在不超时的情况下实现这一点就我的研究而言,$timeout加0秒需要在范围和dom刷新后开始任何dom元素维度的计算。我建议您将调用ctrl.expMapper的逻辑移到ng repeat项中,以便它将是:“dt->wrapper(此处为spyed指令)->项目内容。”。我试着创造这个,但我觉得一切都很好。这些值看起来根本不是随机的。如果我遗漏了什么,请告诉我?