CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Erik Åsland
Erik Åsland

Reputation: 9782

Toggling <a> tag failing while using ng-hide/show and a boolean

I have an up arrow on that should ng-hide if this.showUpArrow is equal to false and ng-show if this.showUpArrow is equal to false. this.showUpArrow is set to false on page load and only toggles to true when the top of the page reaches the specified div's .offsetTop. I am getting it to recognize when it should turn the boolean to true once it reached the div fine and dandy. The problem is that it isn't ng-showing the <a> tag that I want it to show when this.showUpArrow is set to true. What gives?

Here is my HTML...

<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>

Here 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;

        }
    });
})

It is worth stating that the landingControl portion of my ng-hide and ng-show statements is referencing my controller. I am using the this method instead of the $scope method.

Upvotes: 2

Views: 42

Answers (1)

georgeawg
georgeawg

Reputation: 48968

You need to invoke a digest cycle either with $scope.apply or $timeout.

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.1

This is typically done in a directive.

Upvotes: 2

Related Questions