如果一個div以display開頭：none這個庫不起作用。 Angular.js

我目前使用的庫：如果一個div以display開頭：none這個庫不起作用。 Angular.js

它工作正常，但如果它開始隱藏它不能很好地工作。但我絕對需要它開始隱藏。我有一個ID爲「div_swiper」，包含sw div的div。最初有「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/

來源

2017-04-26 yavg

你想'＃div_swipper'到出現在您的控制器的負載？ –

@JulienTASSIN我唯一想要的，是當我點擊顯示按鈕時，圖書館的工作原理是這樣的，如果從一開始它就沒有類ng-hide – yavg

沒有必要約爲直接在這樣的DOM搞混。它不僅比必要的更加複雜，而且依賴於全局ID來引發組件之間的衝突。

使用範圍變量，讓角做的工作：

模板：

<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-slider組件取決於測試面板可見性（或可能其隱藏元素上無法訪問其維度）以決定在哪裏把這些小點放在底部。通過opacity而不是display隱藏它允許它正常工作。

或者，你可以跳過「隱藏」它完全，直到它需要可見根本沒有包括在DOM：

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

來源

2017-04-26 16:08:18

不起作用，行爲保持不變。看看差異開始，沒有ng-hide類。 – yavg

您的意思是在指令編譯之前發生的小小的可見性閃爍？你可以防止使用ng-cloak（添加到示例和小提琴）。 –

http://i.imgur.com/JtXPbzM.jpg – yavg

如果一個div以display開頭：none這個庫不起作用。 Angular.js

回答

相關問題