Need help troubleshooting a directive that should detect scrolling to the bottom of an iframe.
(function() {
angular.module('myapp').directive('textAgreement', function($timeout) {
return {
restrict: 'A',
scope: true,
compile: function(tElement) {
tElement.append('<div ng-show="bottom">There is more...</div>');
return function(scope, element) {
var elm = element[0];
var check = function() {
scope.bottom = (elm.offsetHeight + elm.scrollTop >= elm.scrollHeight);
};
var appliedCheck = function() {
scope.$apply(check);
};
element.bind('scroll', appliedCheck);
check();
$timeout(check,500);
};
}
};
});
})();
Here's the HTML snippet:
<div class="row">
<div class="col-xs-12 body-text">
<h4>Use Agreement</h4>
<div class="col-xs-12" id="tos" class="load-iframe">
<iframe text-agreement id="agreeFrame" class="agree-frame" src="{{ ::trustSrcAgreementUri }}" style="border:0" width="100%" height="100%"></iframe>
</div>
</div>
</div>