如何在AngularJS中將變量傳遞給CSS

Question

我正在嘗試進行虛擬滾動，每當用戶向下滾動時，我都需要為每行添加一個等於容器高度的負值頂部。 但是，當然，此top屬性可以根據某些因素而變化，例如用戶的屏幕分辨率或瀏覽器窗口大小。

到目前為止，這是我得到的：

  <div class="container" id="my-container">
  <!--If it has the class row-scrolled the top property is applied-->
      <div ng-repeat="(row) in virtualCollection"
       ng-class="{'row-scrolled': controller.isScrolled}">
         <!-- row properties -->
      </div>
  </div>

我也考慮過使用ng-style的想法，但是會覆蓋.css文件中的任何樣式。

無論如何，有沒有獲得DOM元素的大小/屬性...

// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';

然后在CSS中使用它？

// css
.row-scrolled {
  top: cssProperty;
}

Answer 1

您不能將變量從javascript傳遞到CSS， 因為CSS並不是一種編程語言，而是一種樣式表語言 。

您可以做的是使用javascript處理特定元素。 根據您的代碼，這里是一個示例：

// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
var $$rowScrolled = document.querySelectorAll(".row-scrolled");

if ($$rowScrolled && $$rowScrolled.length > 0) {
    for (var i = 0; i < $$rowScrolled.length; i++) {
        var $rowScrolled = $$rowScrolled[i];

        $rowScrolled.style.top = cssProperty;         
    }
}

---

使用jQuery ：

// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
var $rowScrolled = $(".row-scrolled");

if ($rowScrolled && $rowScrolled.length > 0) {
    $rowScrolled.css("top", cssProperty);
}

Answer 2

您不能將變量傳遞給CSS。

不過，您可以做的是直接使用ng-style標簽添加屬性：

<div class="container" id="my-container">
  <!--If it has the class row-scrolled the top property is applied-->
  <div ng-repeat="(row) in virtualCollection"
   ng-style="{'top': controller.cssProperty}">
     <!-- row properties -->
  </div>