Ionic 绑定类或变量到动态创建的滚动 DIV 包装器

问：

我有一种情况，我需要将 CSS 样式应用于各种元素，但在一些特定情况下，Ionic 正在用自己的 HTML 包装我的原生 HTML 以用于滚动目的，然后我还需要将 CSS 应用于该包装器 DIV。我有一个隐藏的，需要在用户单击按钮时显示。有没有一种angularJS方法可以将CSS应用于SCROLL div包装器：<DIV>viewer

示例 - 我的 HTML：

<ion-content id="PageNumber1">
   <div id="pageNumber1_header" style="background:white;">
   </div>
   <div id="pageNumber1_content" style="background:white">
   </div>
    <div id="pageNumber1_pageViewer" style="display:none;position:fixed;top:250px; height:500px;">
    </div>

实际呈现的是：

<ion-content id="PageNumber1">
  <div class="scroll">   <-- ionic is adding this
    <div id="pageNumber1_header" style="background:white;">
    </div>
    <div id="pageNumber1_content" style="background:white;">
    </div>
    <div id="pageNumber1_pageViewer" style="display:none;position:fixed;top:250px; height:500px;">
    </div>
  </div>
</ion-content>

目前，我正在让观众显示以下内容......但是，它不会每次都渲染。它在 98% 的时间内有效。有时我没有看到 DOM 使用新的 CSS 设置进行更新，因此不可见。这可能与导致 DOM 无法更新的$digest有关。但是对于这几次，它会导致查看器不显示，这对用户来说使应用程序看起来像是坏了/无法正常工作。viewer

$scope.showViewer = function(x) {
  var h = angular.element('#'+'pageNumber1_header')[0] ;
  var c = angular.element('#'+'pageNumber1_content')[0] ;
  var v = angular.element('#'+'pageNumber1_pageViewer')[0] ;
  var p = h.parentNode ;  // = inoic SCROLL div

  if (x == 0) {
    // Hide Viewer
    h.style.background = "white" ;
    c.style.banckground = "white" ;
    v.style.display = "none" ;
    p.style.height = "0px" ;
  } else if (x == 1) {
    // Show viewer
    h.style.background = "none transparent" ;
    c.style.banckground = "none transparent" ;
    v.style.display = "" ;
    p.style.height = "100%" ;
  }
}

我想做的是如下，因为这将强制 DOM 被$digest刷新：

<ion-content id="PageNumber1">
  <div class="scroll">   <-- ionic is adding this
    <div id="pageNumber1_header" style="background:{{obj.headerColor}};">
    </div>
    <div id="pageNumber1_content" style="background:{{obj.contentColor}};">
    </div>
    <div id="pageNumber1_pageViewer" style="display:{{obj.viewerDisplay}};position:fixed; top:250px; height:500px;">
    </div>
  </div>
</ion-content>

然后在我的控制器中的函数中执行这样的函数......但是使用这种类型的方法，我无法弄清楚如何将 CSS 应用于父 SCROLL div。由于 SCROLL div 是由 Ionic 动态添加的，因此我无法通过任何本机 CSS 或变量绑定到 DIV。{{obj.ionicSCroll}}

$scope.showViewer = function(x) {
  if (x == 0) {
    // Hide Viewer
    $scope.obj.headerColor = "white" ;
    $scope.obj.contentColor = "white" ;
    $scope.obj.viewerDisplay = "none" ;
    //$scope.obj.ionicScrollHeight = "0px" ;  // I need to apply this to the scroll DIV
    $scope.obj.ionicScrollClass = "viewerHeight0" ;  // how do I bind this class to the scroll DIV

  } else if (x == 1) {
    // Show viewer
    $scope.obj.headerColor = "none transparent" ;
    $scope.obj.contentColor = "none transparent" ;
    $scope.obj.viewerDisplay = "" ;
    //$scope.obj.ionicScrollHeight = "100%" ;  // I need to apply this to the scroll DIV
    $scope.obj.ionicScrollClass = "viewerHeight100" ;  // how do I bind this class to the scroll DIV
  }
}

CSS：

.viewerHeight0 {
  height: 0px ;
}
.viewerHieght100 {
  height: 100%;
}

我该怎么做？或者总的来说，没有使用或的另一种方法是什么。我试图避免使用这些，因为常规的 DOM 操作（在 AngularJS 应用程序中）已经是问题的根源。或。。。或者甚至可能吗？getElementByIdangluar.element