Boutons de retour mondial / Suivant en angularjs

Question

J'ai quelques boutons de navigation sur une webApp de type wizard angulaire.Pour des raisons esthétiques, ils doivent être retirés de chaque partial et ajouté à la racine "Index.html":

<!-- 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>

J'ai tenté d'isoler cette logique à l'aide de directives et de variables de portée pour lier l'événement de clic et appliquer des destinations cible pour chaque partielle:

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

Les URL sont ensuite définies dans chaque contrôleur:

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

Le problème est que scope.nextUrl est non défini car la portée de la directive n'hérite pas la portée du contrôleur.

En fonction du fait qu'il ne fonctionne pas actuellement, cette approche semble également un peu fragile pour moi, car elle s'appuie sur la logique de navigation intégrée au code du contrôleur.

Comment puis-je créer de meilleurs boutons de retour globaux / suivants qui redirigent dynamiquement sur la base de la "page" actuelle?

Answer 1

Utilisez un gestionnaire d'état pour gérer les URL du dos et des prochaines URL.Soulager les contrôleurs de cette responsabilité.Ensuite, injectez-le dans les directives qui gèrent les boutons du dos et des prochains.

.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;
}]);

alors

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

et

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