Ich habe eine QuickInfo-Anweisung, die auf Klick öffnen und schließen sollte und zusätzlich bei beliebigem Klick schließen. Da angular-translate
nicht erlaubt, den Inhalt des Elements selbst zu ändern, füge ich stattdessen die Elemente der Richtlinie an.Vermeiden Sie Self-Toggle durch Ereignispropagation in der Direktive
Die Richtlinie sieht etwas wie folgt aus (bitte beachten Sie, dass dies eine vereinfachte Version ist):
{
restrict: 'A',
scope: {},
compile: function(element)
{
element.after('<div class="toggle"></div>
<div class="message" ng-show="active"></div>');
},
link: function(scope, element)
{
angular.element(element.siblings('toggle')).click(function()
{
scope.$apply(function()
{
scope.active = !scope.active;
}
});
angular.element(document).click(function()
{
scope.$apply(function()
{
scope.active = false;
}
});
}
}
Das Problem dabei ist, dass das Click-Ereignis auf dem Element ausgelöst wird (scope.active = true
) und dann propagiert Dokument, während es sofort geschlossen ist.
Wenn ich Propagation stoppe, funktioniert es in den meisten Fällen gut, der eine Fall ist nicht, wenn ich mehrere Instanzen der Direktive auf meiner Seite habe und nacheinander klicke (der erste öffnete sich und der andere sollte man öffnen, aber aufgrund der Ausbreitung ist gestoppt die document.click
Falle der anderen Instanz nicht ausgelöst
Edit:.This fiddle demonstriert das Problem wenn Sie das grüne Feld darauf klicken und klicken Sie erneut auf es funktioniert, wenn. Sie klicken auf das grüne Kästchen und dann auf den Hintergrund, wenn Sie auf das grüne Kästchen und dann auf das andere grüne Kästchen klicken, aber beide sind geöffnet, obwohl das erste geschlossen werden sollte.
Wenn Sie die event.stopPropagation()
auf line 20
entfernen, wird der Hinweis überhaupt nicht angezeigt, da der Klick auf das Feld zuerst ausgelöst wird, der Hinweis wird jedoch angezeigt, aber nach weiterer Ereignisausbreitung wird auch der Klick auf Hintergrund ausgelöst und sofort wieder geschlossen.
Wenn es eine insgesamt bessere ist Lösung für mein Problem zu schätzen wissen würde ich das auch
Können Sie ein Beispiel jsfiddle, mit denen das Problem zu reproduzieren? –
Sicher, überprüfen Sie die aktualisierte Frage – Aides