Ich arbeite an einer Dashboard-Anwendung, bei der eine Reihe von Modulen gleichzeitig angezeigt wird. Ich möchte diesen Modulen mehrere Ansichten hinzufügen. Zum Beispiel ist die erste Ansicht eines Github-Moduls eine Liste Ihrer Repositories. Wenn Sie auf einen Repository-Link in diesem Modul klicken, wird diese Ansicht im Modul durch einen neuen Bildschirm ersetzt, auf dem alle Detailinformationen zu diesem Repo angezeigt werden.
Ich möchte jedoch, dass diese Ansicht in diesem Modul isoliert ist, damit ich meine anderen Module gleichzeitig verwenden kann (ich möchte die Seiten überhaupt nicht wechseln).
Ein Beispiel für das, was ich erreichen möchte, finden Sie hier: Ссылка
In diesem Beispiel würden Sie auf eine Frucht oder ein Auto klicken und detaillierte Informationen über diesen Artikel in diesem Modul in einer neuen Ansicht erhalten. (es führt derzeit nur eine Warnung aus).
Das habe ich bisher, aber ich habe keine Ahnung, wie ich das strukturieren und angehen sollte, soweit Controller und Ansichten gehen:
%Vor%Vielen Dank im Voraus für jeden, der Ihnen helfen kann.
Wenn Sie möchten, dass ein paar Zustände innerhalb desselben HTML-Elements angezeigt werden, können Sie die integrierte Anweisung ng-switch verwenden. Auf diese Weise können Sie den Inhalt des Elements wechseln, während Sie gleichzeitig die gleiche $scope beibehalten, sodass Sie die Daten problemlos zwischen diesen Zuständen austauschen können.
Hier ist Ihre aktualisierte Geige: Ссылка und weiter unten die Erklärung.
Im Falle Ihres Beispiels könnte es so aussehen:
HTML
%Vor% Die zusätzliche Variable moduleState definiert den aktuellen Status des Widgets. Dank der ng-switch -Direktive wechselt der Inhalt der äußeren div automatisch zwischen inneren Elementen, basierend auf den Werten, die an ihre ng-switch-when -Attribute übergeben werden.
JS
%Vor% Sie müssen lediglich den Wert der Variable moduleState ändern, die automatisch die gewünschte Widgetansicht anzeigt. Darüber hinaus enthält die eingeführte Variable selectedFruit den Verweis des Elements, auf das in der Detailansicht zugegriffen werden soll.
Der Vorteil der Verwendung der ng-switch -Direktive besteht darin, dass Sie auf einfache Weise beliebig viele Status zu Ihrem Widget hinzufügen können.
Sie können Ihr zweites Modul entsprechend modifizieren.
Ich bin nicht ganz sicher, was Sie mit new view meinen, und es gibt wahrscheinlich ein paar Möglichkeiten, dies zu tun, aber nur um Sie mit einem der einfachsten (meiner Meinung nach) zu beginnen, können Sie Details haben Element für jedes Modul, das Sie basierend auf einer Auswahl ein- / ausblenden:
Tags und Links javascript angularjs