Angular bind scroll with $scope to be used in ng-hide

Question

I want banner to hide when user scroll downs. I took reference from Bind class toggle to window scroll event

I wanted to update a property in scope which I can use later to hide a banner.

Here is the code I have written: Ref: http://jsfiddle.net/8gYV4/

app = angular.module('myApp', []);
app.directive('ttlscrollhide', ['$window', function($window){
  return {
    link: function($scope, iElm, iAttrs) {
      var height = iElm[0].offsetHeight;
      angular.element($window).bind("scroll", function() {
        console.log(this.pageYOffset);
        if (this.pageYOffset >= height) {
          $scope.banner.hide = false;
        }
      })
    }
  };
}]).controller('MyCtrl', ['$scope', function($scope) {
  $scope.banner = {};
  $scope.banner.src = "http://art.exhibition.touchtalent.com/ex-12_2.png";
  $scope.banner.title = "Oho";
  $scope.banner.hide = true;
  $scope.toggle = function() {
    if($scope.banner.hide == true) {
      $scope.banner.hide = false;
    } else {
      $scope.banner.hide = true;
    }
  }
}]);

<div ng-controller="MyCtrl">
    <div ttlscrollhide ng-show="banner.hide">
      <img ng-src="{{banner.src}}">
    </div>
    <button ng-click="toggle()">Toggle</button>
</div>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

but its not updating the $scope variable. Whereas when I click on toggle button its working fine.

Alex W · Accepted Answer · 2018-07-03 17:27:35Z

app = angular.module('myApp', []);
app.directive('ttlscrollhide', ['$window', function ($window) {
    return {
        link: function ($scope, iElm, iAttrs) {
            var height = iElm[0].offsetHeight;
            angular.element($window).bind("scroll", function () {
                console.log('visible : %s < %s %s', this.pageYOffset, height, this.pageYOffset < height);
                $scope.$apply(function(){
                    $scope.banner.hide = this.pageYOffset < height;
                });
            })
        }
    };
}]).controller('MyCtrl', ['$scope', function ($scope) {
    $scope.banner = {};
    $scope.banner.src = "http://art.exhibition.touchtalent.com/ex-12_2.png";
    $scope.banner.title = "Oho";
    $scope.banner.hide = true;
    $scope.toggle = function () {
        if ($scope.banner.hide == true) {
            $scope.banner.hide = false;
        } else {
            $scope.banner.hide = true;
        }
    }
}]);

<script src="https://code.angularjs.org/1.0.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div id="test-div" ttlscrollhide ng-show="banner.hide">
            <img ng-src="{{banner.src}}" height="250px">
        </div>
        <button ng-click="toggle()">Toggle</button>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>

Actually, you have 2 competing problems here :

First : As you haven't set a height to your image, if you log the height variable, you'll see that it outputs '19', which is a bit small for the image you're using.
Second : You are manipulating scope variables (banner.hide) from a directive and from an event listener callback, I think this is considered "outside" angular scope, thus you must use $apply to notify angular that you're changing the scope from outside.

Here is an updated fiddle that seems to work for me. Let me know if it's ok for you.

Hope this helps.

Collectives™ on Stack Overflow

Angular bind scroll with $scope to be used in ng-hide

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related