AngularJS - Mehrere ng-Ansicht in einer Vorlage

132

Ich erstelle eine dynamische Web-App mit AngularJS. Ist es möglich, mehrere ng-viewauf einer einzigen Vorlage zu haben?

angularjs ng-view Jayram
quelle
2
Es scheint eine Pull-Anfrage zu geben, immer noch mit einigen Fehlern: github.com/angular/angular.js/pull/1198
Alp
4
Jan Varwig schreibt über die Rolle von Richtlinien in Angular. Es ist keine Antwort auf Ihre Frage, aber in einigen Fällen könnten seine Ideen eine gute Alternative sein: jan.varwig.org/archive/angularjs-views-vs-directives/…
Juha Palomäki
Ich habe das eckige Tutorial durchgearbeitet und hatte genau die gleiche Frage. Sie machen dies nicht sehr deutlich. Es scheint jedoch ein ziemlich tiefes Konzept zu sein.
qwwqwwq

Antworten:

100

Sie können nur eine haben ng-view.

Sie können ihren Inhalt auf verschiedene Weise ändern: ng-include, ng-switchoder Mapping verschiedene Controller und Vorlagen durch die routeProvider.

pasine
quelle
1
Mapping-Controller und -Vorlagen ersetzen das gesamte ng-view-Element, oder?
zx1986
9
Was ist mit der dynamischen Änderung des Inhalts eines Widgets? Möchten Sie nicht eine Ansicht für das Widget und einen Controller für das Widget sowie ein Modell für das Widget erstellen?
Ray Suelzer
Wird empfohlen, Ansichten zu verwenden? Ist es nicht besser, divs mit ng-showund zu definieren ng-hideund ihre Sichtbarkeit mithilfe von Variablen zu steuern? Weil ich manchmal mehrere Komponenten verstecken / anzeigen möchte
SomethingSomething
39

UI-Router ist ein Projekt, das helfen kann: https://github.com/angular-ui/ui-router Eine seiner Funktionen sind mehrere benannte Ansichten

UI-Router hat viele Funktionen und ich empfehle Ihnen, ihn zu verwenden, wenn Sie an einer erweiterten App arbeiten.

Überprüfen Sie Dokumentation von Multiple Benannte Ansichten hier .

Morteza Ziyae
quelle
6
Leider heißt es in der UI-Router-Readme: Hinweis: UI-Router befindet sich in der aktiven Entwicklung. Während diese Bibliothek gut getestet ist, kann sich die API ändern. Erwägen Sie die Verwendung in Produktionsanwendungen nur, wenn Sie einem Änderungsprotokoll folgen und Ihre Verwendung entsprechend aktualisieren möchten.
Trainoasis
1
@trainoasis Hat es für mehrere Projekte verwendet, scheint 'sehr' stabil zu sein und bis jetzt hatte ich kein Problem mit dem Ändern der API, tatsächlich erinnere ich mich an keine größere Änderung der API.
Morteza Ziyae
19

Ich glaube, Sie können es erreichen, indem Sie nur Single haben ng-view. In der Hauptvorlage können Sie ng-includeAbschnitte für Unteransichten haben und dann im Hauptcontroller Modelleigenschaften für jede Untervorlage definieren. Damit sie automatisch an ng-includeAbschnitte gebunden werden. Dies ist dasselbe wie mit mehrerenng-view

Sie können das in der Dokumentation angegebene Beispiel überprüfenng-include

Wenn Sie im Beispiel die Vorlage aus der Dropdown-Liste ändern, wird der Inhalt geändert. Nehmen wir hier an, Sie haben einen Hauptinhalt ng-viewund anstatt Unterinhalte manuell durch Auswahl der Dropdown-Liste auszuwählen, tun Sie dies wie beim Laden der Hauptansicht.

Tekz
quelle
2
In Ermangelung einer Lösung wie UI-Router ist ng-include tatsächlich eine praktikable Alternative, wie Sie erklärt haben. Was ng-include nicht erreichen kann, sind URL-gesteuerte Mehrfachansichten. $ Route kann verschiedene Ansichten basierend auf der aktuellen URL nicht dynamisch rendern. Wir könnten die Arme von Angular drehen und dies mithilfe einer benutzerdefinierten Logik in der Steuerung erreichen, wie im Beispiel in der ng-include Dokumentation , aber es ist kein wünschenswertes Muster der Anwendungsarchitektur, UI-Router ist die richtige Art von Lösung.
Yiling
Ein Plus für @ Yiling Kommentar. Die Verwendung von ng-include ist eine Problemumgehung.
Farshid Saberi
13

Mit dem regulären ng-viewModul können Sie nicht mehr als eine dynamische Vorlage haben.

Mit diesem Projekt können Sie dies jedoch tun (suchen nach ui-router).

ŁukaszBachman
quelle
3
Angular-UI scheint eine gute Wahl in der (nahen) Zukunft zu sein, aber es scheint immer noch sehr instabil für den Produktionseinsatz zu sein
David Barreto
8

Es ist möglich, mehrere oder verschachtelte Ansichten zu haben. Aber nicht von ng-view.

Das primäre Routing-Modul in Angular unterstützt nicht mehrere Ansichten. Sie können aber auch einen UI-Router verwenden. Dies ist ein Modul eines Drittanbieters, das Sie über Github, Angular-UI / UI-Router, https://github.com/angular-ui/ui-router erhalten können . Derzeit wird auch eine neue Version von ngRouter (ngNewRouter) entwickelt. Es ist im Moment nicht stabil. Deshalb biete ich Ihnen ein einfaches Startbeispiel mit UI-Router. Mit ihm können Sie Ansichten benennen und angeben, welche Vorlagen und Controller zum Rendern verwendet werden sollen. Mit $ stateProvider sollten Sie angeben, wie Ansichtsplatzhalter für einen bestimmten Status gerendert werden sollen.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Für dieses Beispiel müssen Sie auf anglejs und angle-ui.router verweisen.

$ bower install angular-ui-router
Farshid Saberi
quelle
Danke Farshid das ist großartig! Es sollte im
Angular-UI
Ich bin mir nicht sicher, warum Sie das tun müssen. Warum nicht die Kopf- / Fußzeile und die ng-Ansicht den Inhalt einbinden?
user441521
ng-include funktioniert, wenn die Dateien gehostet werden, z. auf nodejs. Wenn Sie mit einem lokalen Verzeichnis arbeiten, wird ein domänenübergreifender Fehler ausgegeben.
Sid
0

Sie können nicht mehrere ng-Ansicht haben. Unten ist mein Anwendungsfall, in dem ich meine Anforderung gelöst habe. Ich wollte ein Verhalten mit Registerkarten in meinem Modelldialog haben. Ich hatte ein Problem, als ich auf Registerkarten mit Hyperlink klickte, die Router-Links aufrufen. Ich habe dies mit Button und CSS für Tabs gelöst. Wenn der Benutzer auf die Registerkarte klickt, wird tatsächlich kein Hyperlink aufgerufen, der immer den ng-Router aufruft. Wenn der Benutzer auf die Registerkarte klickt, wird eine Methode aufgerufen, bei der ich HTML dynamisch lade. Unten ist die Funktion beim Klicken auf die Registerkarte

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Benutzer $ templateRequest. Fügen Sie auf der Seite test_template.html Ihren HTML-Inhalt hinzu. Dieser HTML-Inhalt wird an Ihren Controller gebunden.

Aslam anwer
quelle