Question

我正在尝试在Scroll事件中更改DIV的顶部位置 -

在控制器中我有 -

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

在html中 -

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

滚动事件是在控制台中打印scrollTop值但是＆＃34; Div＆＃34;风格永远不会更新。

如果这在语法上不正确，请纠正我。

Answer 1

您需要在设置$scope.$apply();后调用vm.scrollTop，因为事件处理程序在angular的意识之外执行。

Answer 2

您可以使用$scope.$watch或$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>

l_old

Angular - 使用ng-style更改css

2 个答案: