글로벌 뒤로/다음 버튼

Question

각도 마법사 스타일의 웹 앱에 탐색 버튼이 있습니다.미용적인 이유로 각 부분에서 제거하고 뿌리"인덱스"에 추가해야합니다.":

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

다음 각 컨트롤러에 정의 됩니다.:

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

문제는 scope.nextUrl 이 정의되지 않은 지시문 범위는 컨트롤러 범위를 상속하지 않기 때문에.

현재 작동하지 않는다는 사실과 함께,이 접근법은 컨트롤러 코드에 포함 된 탐색 논리에 의존하기 때문에 나에게 조금 허약 해 보인다.

현재"페이지"를 기반으로 동적으로 리디렉션하는 더 나은 글로벌 뒤로/다음 버튼을 어떻게 만들 수 있습니까?

Answer 1

상태 관리자를 사용하여 뒤로 및 다음을 처리합니다.이 책임의 컨트롤러를 완화.그런 다음 뒤로 및 다음 버튼을 처리하는 지시문에 삽입하십시오.

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