أزرار الرجوع/التالي العالمية في AngularJS

Question

لدي بعض أزرار التنقل في تطبيق الويب Angular بنمط المعالج.لأسباب تجميلية، يجب إزالتها من كل جزء وإضافتها إلى الجذر "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 يكون غير معرف نظرًا لأن نطاق التوجيه لا يرث نطاق وحدة التحكم.

إلى جانب حقيقة أنه لا يعمل حاليًا، يبدو هذا الأسلوب أيضًا هشًا بعض الشيء بالنسبة لي نظرًا لأنه يعتمد على منطق التنقل المضمن في كود وحدة التحكم.

كيف يمكنني إنشاء أزرار رجوع/تالية عالمية أفضل لإعادة التوجيه ديناميكيًا بناءً على "الصفحة" الحالية؟

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