2017-04-10 2 views
0

Ich habe folgendes gemacht HTML:ngShow arbeitet nicht mit mehreren Elementen bestehenden

<div class="tutorial-dot ng-hide" ng-show-start="currentStep"> 
    <div class="dot"></div> 
</div> 
<div class="tutorial-modal" ng-show-end=""> 

Wie Sie sehen können, das ng-show-Startelement versteckt, aber das ng-Show-End-Element nicht. Sie sollten beide die gleiche ngShow-Direktiveninstanz verwenden, da sie multiElement unterstützt, aber die ngShow-Direktive auf dem ng-show-end-Element nicht ordnungsgemäß funktioniert.

Antwort

0

Ich konnte dies zum Funktionieren bringen, indem Sie die Klasse ng-hide auf der ersten Div entfernen. Ich fügte einen Text hinzu, um zu sehen, ob die Show funktionierte. currentStep wird nicht initialisiert, sodass die divs versteckt werden. Wenn Sie auf die Schaltfläche klicken, wird der Wert von currentStep mit dem ng-Klick auf true umgelegt.

<div class="tutorial-dot" ng-show-start="currentStep"> 
    <div class="dot">Hello, this will show when the current step is true.</div> 
    </div> 
    <div class="tutorial-modal" ng-show-end> 
    This is the end 
    </div> 

Hier ist ein Link zu einem Codepen, der das funktioniert zeigt. Wenn es noch mehr Fragen zu dieser Gabel gibt, dann melde mich und zeige das Problem, das du hast. http://codepen.io/mkl/pen/PpMvzZ?#

+0

Ihr Code unterscheidet sich von meinem darin, dass das ng-show-end auch den Ausdruck als Wert hat. Ist das erforderlich? Es war nicht für andere MultiElement-Richtlinien, die ich verwendet habe. –

+0

Ich habe es mit dem gleichen Ausdruck wie das Argument für 'ng-show-end' versucht und es hat immer noch nicht funktioniert. Wenn Sie das ng-init in Ihrem Beispiel von true in false ändern, blendet es nur den ng-show-start aus, nicht das ng-show-end, so dass es auch in Ihrem Beispiel nicht funktioniert. –

+0

Ich habe das Problem herausgefunden. Entferne die Klasse ng-hide aus dem ersten div. Ich aktualisiere den Code in der Antwort und im Codepen. – Michael

Verwandte Themen