Wie Kopfzeile und Fußzeile mit AngularJs umgehen

Es tut mir sehr leid, wenn ich mich nicht sehr gut erkläre, so geht hier. Im Grunde habe ich Probleme, dieses Problem zu lösen. Ich benutze Yeoman um mein eckiges Projekt zu erstellen. Ich habe eine Kopf- und Fußzeile, Fußzeile wird statisch und Kopfzeile benötigt einen eigenen Controller. Das Problem, das ich habe, ist, dass ich nicht möchte, dass der Header außerhalb anderer Controller liegt. Vielleicht liege ich falsch und es ist nicht wirklich ein Problem, und das beste Verfahren wäre natürlich, den Header außerhalb ng-view zu haben? Das ist, was ich habe, so weit:Wie Kopfzeile und Fußzeile mit AngularJs umgehen

<head> 
    <!-- head stuff here --> 
    </head> 
    <body ng-app="dscover.me"> 

     <div ng-include src="'partials/header.html'"></div> 

     <div ng-view=""> 
     </div> 

     <div ng-include src="'partials/footer.html'"></div> 
    </body>

Ist das eine richtige Art und Weise eine Kopf- und Fußzeile außerhalb des MainCtrl von einschließlich? Es ergibt nur Sinn für mich, weil ich, wenn ich einen neuen Controller/eine neue Seite erstellen würde, immer noch Zugriff auf die Controller außerhalb haben könnte? Das Problem ist wieder, ich möchte mich davon abhalten, zu verwenden, und leider scheint dies der einzige Weg zu sein, wenn es darum geht, den Header außerhalb der MainCtrl zu haben?

Es tut mir leid für die schreckliche Erklärung, aber ich hoffe euch zu verstehen. Wenn es einen besseren Weg gibt, lass es mich wissen. Jede Hilfe wird geschätzt!

Quelle

2013-11-22 Sananes

Sie sollten diese Struktur beibehalten. Wenn Controller Daten austauschen sollen, benötigen Sie ohnehin Dienste. Und Sie möchten nicht, dass die Kopfzeile jedes Mal neu gerendert wird, wenn sich die Ansicht ändert. – maxdec

rootScope ist ein vollkommen akzeptabler Mechanismus für die Kommunikation zwischen Controllern unter Verwendung eines Evening-Modells, bei dem Controller Ereignisse auslösen, die von anderen Controllern abonniert wurden. – Chandermani

Eine andere Option wäre, $ Broadcast zu verwenden, um Nachrichten an die Kopfzeile zu senden, aber ich stimme zu, in diesem Fall ist nichts falsch daran, nur das rootScope zu verwenden. –

Zuerst würde ich versuchen, auf die gegebene Funktionalität von AngularJS wie möglich zu vertrauen. Es gibt drei Möglichkeiten, um die Kopf- und Fußzeilen in der App zu implementieren:

ng-include

Der Grund, warum Sie es Einfachheit verwenden möchten und weniger Code. Von docs:

Fetches, kompiliert und ein externes HTML-Fragment

So, es ist einfach ein externes Stück HTML enthält.

ng-view

Dies ist ein Standard-Router in Angular (vor 2.0), und es ist eine bessere Option ui-router genannt.

Der UI-Router ist ein Routing-Framework für AngularJS, das von AngularUI team erstellt wurde. Es bietet einen anderen Ansatz als ngRoute, da es Ihre Anwendungsansichten basierend auf dem Status der Anwendung und nicht nur der Routen-URL ändert.

Es unterstützt Funktionen wie verschachtelte Ansichten usw. Der Hauptgrund für die Verwendung wäre, Controller und Bereiche dieser Ansichten zu trennen. In Bezug auf Kopf- und Fußzeilen, wenn Sie eine komplett separate Logik im Inneren haben möchten, dann gehen Sie dafür.

custom directive

Diese Option für den Fall verwendet werden soll, wenn Sie eine logische Überlappung in dem Hauptinhalt Umfang und Kopf-/Fußzeilen haben. Außerdem erhalten Sie zusätzliche Vorteile wie Wiederverwendbarkeit usw.

So, Ihre Wahl ein, zu holen aber (here, here, here oder here), bevor Sie schreiben, um zu suchen und liest nicht faul sein.

Quelle

2015-12-01 13:48:53 boldnik

Wie Kopfzeile und Fußzeile mit AngularJs umgehen

Antwort

Verwandte Themen