Question

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.

Answer 1

您需要使用$scope.apply或$timeout来调用摘要周期。

$apply()用于从角度框架外部以角度执行表达式。（例如，来自浏览器DOM事件，setTimeout，XHR或第三方库）。因为我们正在调用角度框架，所以我们需要执行异常处理的适当范围生命周期，执行监视。¹

这通常在指令中完成。

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

1 个答案: