There is an up arrow that should be hidden using ng-hide if this.showUpArrow is false, and shown using ng-show if this.showUpArrow is true. Initially, this.showUpArrow is set to false when the page loads, and it only switches to true when the top of the page reaches a specified div's .offsetTop value. The detection of reaching the div works fine; however, there seems to be an issue with displaying the <a> tag correctly when this.showUpArrow is true. What could be causing this?
This is my HTML code...
<a href='' id='up-arrow-link' ng-click='landingControl.goToAnchor("wrapper")'>
<img id='up-arrow' src='../static/images/uparrow.png' ng-hide='!landingControl.showUpArrow' ng-show='landingControl.showUpArrow'>
</a>
This is my Angular controller...
myModule.controller('landingController', function($location, $anchorScroll, $window){
var _this = this;
this.showUpArrow = false;
angular.element($window).bind("scroll", function() {
var elem = angular.element('#mystory')[0].offsetTop
var topOfScreen = $window.scrollY;
if (topOfScreen >= elem) {
_this.showUpArrow = true;
}
});
})
I would like to mention that the landingControl in my ng-hide and ng-show statements refers to my controller. I am utilizing the this approach rather than the $scope method.