Mischen Statische und dynamische Elemente in Kopf

Ich bin relativ neu in angulerjs aber mit Routen, Dienstleistungen, Steuerungen usw., kann ich eine Standard-Web-Anwendung mit einem navbar-Header mit Seiten erscheinen in einer ng-view darunter, dhMischen Statische und dynamische Elemente in Kopf

<body> 

    <header> 
     navbar goes here 
    </header> 

    <div class="content-wrapper" ng-controller="MainController"> 
     <div ng-view></div> 
    </div> 

</body>

entwickeln

Im Moment ist alles, was zwischen den <header> Tags erscheint, vollständig statisch und ändert sich nicht, unabhängig davon, welche Seite innerhalb der ng-view geladen ist.

Ich muss jetzt eine Anzahl von Elementen zu der Kopfzeile hinzufügen, die kontextabhängig ist basierend auf welcher Seite in ng-view ist.

Also, ich werde einen einzigen Balken am oberen Rand der Website (wie Stackoverflow) haben. Es wird zwei Unterelemente enthalten - eins wird nach links verschoben und ist statisch, das andere wird nach rechts verschoben und sein Inhalt wird dynamisch sein.

Ich bin nicht sicher, wie dies in AngularJS zu erreichen, weil ich eine Seite glaube nur ein ng-view

Jede Beratung würde geschätzt

EDIT enthalten: Hinzufügen folgende Erklärung:

a zu geben, wenig mehr Kontext, einer der DIVs in der Kopfzeile wird kontextabhängige Schaltflächen enthalten. Z.B. Wenn die Website ein Produktelement anzeigt, sind die Schaltflächen in der Kopfzeile "Bearbeiten", "Löschen". Wenn auf der Website eine Rechnung angezeigt wird, sind die Schaltflächen in der Kopfzeile "Produkt hinzufügen", "Rechnung senden". Meine Kopfzeile ist im Grunde wie Youtube, wenn die Schaltflächen auf der rechten Seite je nach Art der angezeigten Seite geändert wurden

Quelle

2016-09-09 John Steed

Ich bin mir nicht ganz sicher, was genau Sie in der Kopfzeile basierend auf NG-Ansicht festlegen möchten, und Sie sollten vielleicht etwas von der Struktur hier überdenken, wenn Sie gerade erst anfangen. Im Allgemeinen können Sie Dinge ein wenig anders schachteln, um Ihnen Zugriff auf Objekte innerhalb MainController $ Bereich zu geben:

Quelle

2016-09-09 22:52:53

Vielen Dank für Ihre Antwort. Um etwas mehr Kontext zu geben, wird einer der DIVs in der Kopfzeile kontextabhängige Schaltflächen enthalten. Z.B. Wenn die Website ein Produktelement anzeigt, sind die Schaltflächen in der Kopfzeile "Bearbeiten", "Löschen". Wenn auf der Website eine Rechnung angezeigt wird, sind die Schaltflächen in der Kopfzeile "Produkt hinzufügen", "Rechnung senden". Meine Kopfzeile ist im Grunde wie Youtube, wenn sich die Schaltflächen auf der rechten Seite basierend auf dem Typ der angezeigten Seite geändert haben. –

Das ist es, was ich meine, hier Ihren Ansatz zu überdenken. Warum kann der Header nicht Teil Ihrer 'ng-view'-Vorlage sein? –

Die andere Hälfte des Headers enthält das Logo und das Menü der Site, die sich nie ändern. Daher scheint es nicht richtig zu sein, sie in jeder ng-view-Vorlage zu haben. Außerdem werden die ng-view-Vorlagen mit einer Animation geladen, und ich möchte nicht, dass die Kopfzeile bei jeder Seitenänderung überhaupt animiert wird. –

Mischen Statische und dynamische Elemente in Kopf

Antwort

Verwandte Themen