wake-up-neo.com

Wie kann ich Ansichten mit Hilfe eines eckigen UI-Routers ausblenden und anzeigen?

Stellen Sie sich vor, eine Anwendung hat eine Listenseite, z. B. eine Tabelle mit einer Liste von Benutzern. In jeder Zeile der Tabelle befindet sich eine Schaltfläche mit der Bezeichnung "Bearbeiten". Wenn Sie auf diese Schaltfläche klicken, wird auf der rechten Seite des Browsers ein Fenster mit dem Formular zum Bearbeiten des Inhalts dieses Benutzers angezeigt. Wenn das Formular gespeichert oder geschlossen wird, wird das rechte Bedienfeld nicht mehr angezeigt.

Wie kann der Angular UI Router das rechte Bedienfeld automatisch anzeigen/ausblenden, wenn der Bearbeitungsstatus eingegeben und beendet wird? Standardmäßig wird die Vorlage hinzugefügt und entfernt, der Container selbst ist jedoch weiterhin auf dem Bildschirm vorhanden.

In der Demo-Anwendung für UI-Router wurde dem HTML-Layout für alle untergeordneten Status ein leerer Speicherplatz zugewiesen. In der von mir erstellten Anwendung möchte ich jedoch wirklich Bereiche ausblenden, wenn sie nicht verwendet werden, und sogar ganze Bildschirme darin verschieben -und-out, wenn Zustände ein- und ausgegeben werden. Ich vermute, dass ich dazu ng-show und ng-hide verwenden muss. Wie gehe ich mit dem UI-Router vor?

Vielen Dank!

35
egervari

Die beste Lösung, die ich gefunden habe, war ungefähr so:

<div id="rightView" ng-show="$state.current.name === 'adminCompanies.list.edit'">
    <div ui-view autoscroll="false"></div>
</div>
34
egervari

Angulars UI-Router bietet eine saubere Methode zum Umschalten von verschachtelten Ansichten.

Injizieren Sie zuerst $ state in Ihren hypothetischen Controller "list page". Dann setzen Sie es dem lokalen $ scope aus:

.controller('ListPageCtrl', function($scope, $state) {
    $scope.$state = $state;
})

Die $ state-Variable, die wir injiziert haben, hat eine Nice-Include-Methode. $ state.includes () nimmt einen String als Argument und prüft diesen String mit dem aktuellen Statusnamen. Wenn der Zustandsname mit der Zeichenfolge übereinstimmt, wird true zurückgegeben, andernfalls false. Dies macht es sehr schön, es mit ng-show oder ng-hide zu verwenden.

Benutze ui-routers $ state.includes () stattdessen mit derselben Vorlage wie egervari:

<div id="rightView" ng-show="$state.includes('list.edit')">
    <div ui-view="edit" autoscroll="false"></div>
</div> 

Neben der Umstellung auf die Includes-Methode habe ich dem ui-view-Attribut einen eindeutigen Namen hinzugefügt. Sie sollten Ihre Ansichten benennen, sobald Sie mehr als zwei haben. Dadurch können sie leichter in Ihren Vorlagen und in Ihrer Logik nachverfolgt werden.

Um deinen Ansichten Namen hinzuzufügen. 1 in 2 ändern:

// 1
.state('list.edit', {
    url: 'list/edit/:id',
    templateUrl: 'template/edit.html',
    controller: 'ListPageEditCtrl'
})

// 2
.state('list.edit', {
    url: 'list/edit/:id',
    views: {
        'edit': { // this is the unique name you can reference later
            templateUrl: 'template/edit.html',
            controller: 'ListPageEditCtrl'
        }
    }
});
42
Tyler Buchea

Stellen Sie sicher, dass Sie dieses Problem auf irgendeine Weise lösen. Stellen Sie sicher, dass Sie in Ihrem .run-Abschnitt in der Winkel-App Folgendes deklarieren:

angular.module('yourApp', ['ui.router'])

    .run(
        ['$rootScope', '$state', '$stateParams',
            function ($rootScope, $state, $stateParams){                    
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
            ]
    )

Ansonsten sind weder $ state noch $ stateParams von den internen Vorlagen aus erreichbar. Ich fand es heraus, die UI-Router-Dokumente zu lesen und den Code der Beispiel-App zu überprüfen, nachdem ich meinen Kopf gegen die Tastatur geschlagen hatte, weil dies nicht funktionierte.

2
JSantaCL

Ihre URL muss den Statusmodus mit Querzeichenfolge widerspiegeln: /stuff/1?edit oder /stuff/1, das für /stuff/1?view steht.

Sie können reloadOnSearch=false verwenden, um AngularJS anzuweisen, die Ansicht nicht erneut zu laden:

http://docs.angularjs.org/api/ngRoute.$routeProvider

Überprüfen Sie in Ihrem controller den Statusmodus (view oder edit) mit $routeParams. Fangen Sie das Klickereignis zum Bearbeiten ab, übergeben Sie Ihr Modell an Ihre Leiste und schalten Sie die Sichtbarkeit entsprechend um.

Sehen Sie diese interessanten Links:

Können Sie einen Pfad ändern, ohne den Controller in AngularJS neu zu laden?

Aktualisieren der URL in Angular JS ohne erneute Wiedergabe

0
roland