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.

Answer 1

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

Answer 2

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>