Angular - 使用 ng 样式更改 css

Posted 2023-03-06

【中文标题】Angular - 使用 ng 样式更改 css

【英文标题】：Angular - Change css using ng-style

【发布时间】：2018-04-30 15:15:51

【问题描述】：

我正在尝试在 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 值，但“Div”样式永远不会更新。

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

【问题讨论】：

ng-style 使用expression 而不是value，试试这个<div ng-style="'top': vm.scrollTop">

我更新了我的问题，但运行时表达式没有更新 div 的样式（顶部 -> 计算滚动）

用双引号关闭你的属性。

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

好吧，$scope.$apply 就是这样做的。谢谢吉姆。您介意提供上述评论作为答案，我会将其标记为其他人的答案

【参考方案1】：

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

【参考方案2】：

您可以使用$scope.$apply 或$scope.$watch。

这是使用$scope.$apply 的sn-p。

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>