Botões globais voltar/próximo em AngularJS

Question

Eu tenho alguns botões de navegação em um aplicativo da web estilo assistente Angular.Por razões estéticas eles precisam ser removidos de cada parcial e adicionados à raiz "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>

Tentei isolar essa lógica usando diretivas e variáveis ​​de escopo para vincular o evento click e aplicar destinos de destino para cada parcial:

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

As URLs são então definidas em cada controlador:

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

O problema é que scope.nextUrl é indefinido já que o escopo da diretiva não herda o escopo do controlador.

Além do fato de não funcionar atualmente, essa abordagem também me parece um pouco frágil, pois depende da lógica de navegação incorporada no código do controlador.

Como posso criar melhores botões globais voltar/próximo que redirecionem dinamicamente com base na "página" atual?

Answer 1

Use um gerenciador de estado para lidar com os URLs anterior e seguinte.Liberte os controladores desta responsabilidade.Em seguida, injete-o nas diretivas que controlam os botões Voltar e Próximo.

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

então

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