如果div以display：none开头，则库不起作用。 Angular.js

Question

我目前正在使用该库：

它工作正常，但如果它开始隐藏它不能很好地工作。但我严格要求它开始隐藏。 我有一个id为“div_swiper”的div，其中包含swiper。最初有“ng-hide”类，如果我执行它，没有这个类，如果它工作正常。就像我说的，我需要这个div开始隐藏。

如何通过隐藏和正常工作来启动它？

  <div id="div_swiper" class='ng-hide'>
    <swiper>
      <slides>
        <slide>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla porro esse quia, voluptas, doloribus est modi quibusdam provident in deleniti, fuga nisi odit quod incidunt a saepe aliquam cupiditate veniam.</slide>
        <slide>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit consequatur amet eius adipisci. Sunt quod fuga ipsa, maiores, vel expedita iste commodi, harum laboriosam voluptatum, consectetur cupiditate dicta impedit nobis.</slide>
      </slides>
      <pagination></pagination>
    </swiper>
  </div>

  $scope.hide=function(){
    var myEl = angular.element( document.querySelector( '#div_swiper' ) );
      //myEl[0].style.display="none";
      myEl.removeClass('ng-show');
      myEl.addClass('ng-hide');
  }
  $scope.show=function(){
    var myEl = angular.element( document.querySelector( '#div_swiper' ) );
      //myEl[0].style.display="inline-block";
      myEl.removeClass('ng-hide');
      myEl.addClass('ng-show');
  }

http://jsfiddle.net/vtha0wbe/

Answer 1

没有必要直接在DOM中捣乱。它不仅比必要的更复杂，而且还可以通过依赖全局ID来邀请组件之间的冲突。

使用范围变量并让Angular完成工作：

模板：

  <div id="div_swiper" ng-cloak ng-if='{hidden: isHidden}'>
    <swiper>
      <slides>
        <slide>...</slide>
        <slide>...</slide>
      </slides>
      <pagination></pagination>
    </swiper>
  </div>

CSS：

.hidden {opacity: 0; position:absolute; pointer-events:none} /* see below */

组件代码：

  $scope.isHidden = true;
  $scope.hide = function() {
    $scope.isHidden = true;
  }
  $scope.show = function() {
    $scope.isHidden = false;
  }

在这里更新你的小提琴：http://jsfiddle.net/n8cd3orp/（注意，这个代码最好放在指令而不是控制器中，因为控制器将使用它在所有指令中共享范围值;指令将使其保持在本地每个指令。）

关于CSS的注意事项：您使用的ui滑块组件取决于测试面板可见性（或可能是其隐藏元素上无法访问的尺寸），以决定将这些小点放在底部的位置。通过opacity而不是display隐藏它可以让它正常工作。

或者，您可以跳过＆＃34;隐藏＆＃34;它完全没有，只要它不需要包含在DOM中，直到它需要可见：

 <div id="div_swiper" ng-cloak ng-if='!isHidden'>