Pulsanti globali / successivi in AngularJS

Question

Ho alcuni pulsanti di navigazione su un webapp in stile wizard angolare.Per motivi cosmetici devono essere rimossi da ciascuna parziale e aggiunta alla root "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>

.

Ho tentato di isolare questa logica utilizzando le direttive e le variabili dell'ambito per legare l'evento click e applicare le destinazioni di destinazione per ogni parziale:

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

.

Gli URL vengono quindi definiti in ciascun controller:

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

.

Il problema è che scope.nextUrl è indefinito poiché la portata della direttiva non eredita l'ambito del controller.

Insieme al fatto che attualmente non funziona, questo approccio sembra anche un po 'fragile per me da quando si affida alla logica di navigazione incorporata nel codice del controller.

Come potrei creare nuovi pulsanti globali / successivi globali che reindirizzano dinamicamente in base alla "pagina" corrente?

Answer 1

Utilizzare un manager di stato per gestire il retro e gli URL successivi.Alleviare i controller di questa responsabilità.Quindi iniettarlo nelle direttive che gestiscono il retro e i pulsanti successivi.

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

.

quindi

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

.

e

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

.