Angular - Change css using ng-style

Question

I am trying to change top position of a DIV on Scroll event -

In controller i have-

    angular.element($window).on("scroll", function(e) {
        vm.scrollTop = angular.element($window).scrollTop()+'px';
        console.log(vm.scrollTop);
    });

In html -

<div ng-style="{'top': vm.scrollTop}">
    Hello World
</div>

On scroll event is printing scrollTop values in console but "Div" style never gets updated.

Please correct me if this is syntactically incorrect.

ng-style take an expression not a value, try this <div ng-style="{'top': vm.scrollTop}"> — Ayoub
– Ayoub, Commented Nov 16, 2017 at 23:09
I updated my question for the same but run time expression are not updating style of the div (top -> calculated scroll) — NewBee
– NewBee, Commented Nov 16, 2017 at 23:16
You also need to call $scope.$apply(); after setting vm.scrollTop because the event handler is executing outside of angular's awareness. — Jim Cote
– Jim Cote, Commented Nov 16, 2017 at 23:24
Well, $scope.$apply does that. Thanks Jim. You mind providing above comment as answer, i will mark it as the answer for others — NewBee
– NewBee, Commented Nov 16, 2017 at 23:35

Jim Cote · Accepted Answer · 2017-11-17 01:08:15Z

1

You need to call $scope.$apply(); after setting vm.scrollTop because the event handler is executing outside of angular's awareness.

answered Nov 17, 2017 at 1:08

Jim Cote

1,7563 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

artgb · Accepted Answer · 2017-11-17 03:02:14Z

You can use $scope.$apply or $scope.$watch.

Here's snippet using $scope.$apply.

function TodoCtrl($scope, $document, $window) {
   $scope.scrollTop = 30;
     $document.bind('scroll', function(){
        $scope.$apply(function(){
			$scope.scrollTop = $window.scrollY;
      });
   });
   $scope.getStyle = function(){
        var styles = {}
        styles['margin-top'] = $scope.scrollTop + 'px';
        return styles;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app>
  <h2>Top</h2>
  <div ng-controller="TodoCtrl">
     <div ng-style="getStyle()">
         Hello World
     </div>
  </div>
	<div style="height: 1000px; border: solid 2px red;"></div>
</div>

Collectives™ on Stack Overflow

Angular - Change css using ng-style

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related