Global back/next buttons in AngularJS

Question

У меня есть кнопки навигации на веб-устройстве с угловым волшебством. Для косметических целей, они должны быть удалены друг от друга частичного и присоединяемых к корню «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> 

Я пытался изолировать эту логику с помощью директив и области видимости переменных, чтобы связать событие кликов и цели направления для каждого частичного:

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

URL, являются затем определены в каждом контроллере:

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

проблема в том, что scope.nextUrl является undefined поскольку область действия директивы не наследует область управления.

Наряду с тем, что в настоящее время он не работает, этот подход также кажется немного хрупким для меня, поскольку он основан на логике навигации, встроенной в код контроллера.

Как я могу создать лучшие глобальные back/next кнопки, которые динамически перенаправляются на основе текущей «страницы»?

Answer 1

Используйте диспетчер состояний для обработки обратного и следующего URL-адресов. Освободите контролеров от этой ответственности. Затем введите его в директивы, которые обрабатывают заднюю и следующую кнопки.

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

затем

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

и

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