Globale Zurück-/Weiter-Schaltflächen in AngularJS

Question

Ich habe einige Navigationsschaltflächen in einer Webanwendung im Angular-Assistentenstil.Aus kosmetischen Gründen müssen sie aus jedem Teil entfernt und zur Wurzel „index.html“ hinzugefügt werden:

<!-- Global navigation buttons for all partials -->
<div class="navbar navbar-fixed-top">
    <button class="btn btn-default" back-action>Back</button>
    <button class="btn btn-default" next-action>Next</button>
</div>

<div class="container ng-view ng-cloak">
     <!-- Partials rendered in here, managed by $routeProvider-->
</div>

Ich habe versucht, diese Logik mithilfe von Anweisungen und Bereichsvariablen zu isolieren, um das Klickereignis zu binden und Zielziele für jeden Teil anzuwenden:

.directive('nextAction', ['$location', function($location) {
    return {
        restrict: 'A',
        link: function(scope, elm) {
            elm.on('click', function () {
               var nextUrl = scope.nextUrl;
               $location.url(nextUrl);
            });
        }
    };
}])

Die URLs werden dann in jedem Controller definiert:

.controller('FirstStepCtrl', ['$scope', function ($scope) {
        $scope.backUrl = '/';
        $scope.nextUrl = '/first/second';
        ...

Das Problem ist, dass scope.nextUrl Ist nicht definiert da der Direktivenbereich den Controllerbereich nicht erbt.

Neben der Tatsache, dass es derzeit nicht funktioniert, erscheint mir dieser Ansatz auch etwas fragil, da er auf der im Controller-Code eingebetteten Navigationslogik basiert.

Wie kann ich bessere globale Zurück-/Weiter-Schaltflächen erstellen, die basierend auf der aktuellen „Seite“ dynamisch umleiten?

Answer 1

Verwenden Sie einen Statusmanager, um die Back- und Next-URLs zu verwalten.Entbinden Sie die Verantwortlichen von dieser Verantwortung.Fügen Sie es dann in die Anweisungen ein, die die Zurück- und Weiter-Schaltflächen verarbeiten.

.factory('stateMgr', ['$rootScope', function ($rootScope) {
    var stateMgr = {
        backUrl: '',
        nextUrl: ''
    };

    $rootScope.$on('$routeChangeSuccess', function (nextRoute, lastRoute) {
        // logic in here will look at nextRoute and then set back and next urls
        // based on new route   
        // e.g. stateMgr.backUrl = '/'; stateMgr.nextUrl = '/whatever';
    });

    return stateMgr;
}]);

Dann

.controller('FirstStepCtrl', ['$scope', function ($scope) {
    // do not need to do anything with back/next urls in here
    ...

Und

.directive('nextAction', ['$location', 'stateMgr', function($location, stateMgr) {
    return {
        restrict: 'A',
        link: function(scope, elm) {
            elm.on('click', function () {
                $location.url(stateMgr.nextUrl);
            });
        }
    };
}])