爲視圖創建下一個/後退按鈕

Question

我目前正在學習角度，我想創建顯示不同視圖的下一個/後退按鈕。

我有一個模板稱爲example.html

<h1>{{ message }}</h1> 

所使用的多個控制器：

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){ 

    $routeProvider. 
     when('/', { 
      templateUrl: '/partials/home.html' 
     }). 
     when('/first', { 
      templateUrl: '/partials/example.html', 
      controller : 'firstController' 
     }). 
     when('/second', { 
      templateUrl: '/partials/example.html', 
      controller : 'secondController' 
     }). 
     when('/third', { 
      templateUrl: '/partials/example.html', 
      controller : 'thirdController' 
     }). 
     otherwise({ 
      redirectTo: '/' 
     }); 

     $locationProvider.html5Mode(true); 
    } 
]); 

而且我有一個header.html它被包括在我的index.html：

<a href="" data-ng-click="goBack()"> Next </a> 
<a href="" data-ng-click="goNext()"> Back </a> 

這是控制器：

app.controller('firstController', function($scope, $anchorScroll, $location) { 
    $anchorScroll(); 
    $scope.message = 'First Controller'; 

    $scope.goBack = function() { 
     $location.path('/third'); 
    }; 

    $scope.goNext = function() { 
     $location.path('/second'); 
    }; 
}); 

app.controller('secondController', function($scope, $anchorScroll, $location) { 
    $anchorScroll(); 
    $scope.message = 'Second Controller'; 

    $scope.goBack = function() { 
     $location.path('/first'); 
    }; 

    $scope.goNext = function() { 
     $location.path('/third'); 
    }; 
}); 

app.controller('thirdController', function($scope, $anchorScroll, $location) { 
    $anchorScroll(); 
    $scope.message = 'Third Controller'; 

    $scope.goBack = function() { 
     $location.path('/second'); 
    }; 

    $scope.goNext = function() { 
     $location.path('/first'); 
    }; 
}); 

而且這工作正常。

我的問題是如果這是一個很好的方式，或者有更好的方法嗎？

Answer 1

代替靜態解就像給路徑陣列，從而，你可以使用$route ...

所以得到動態的路線，我們將使用$route ...

BASIC

剛剛注入$route進入我們的服務，並通過他們在配置模塊中的順序獲取所有定義的路線...在我們的服務定義我們的goNext和GoBack的功能

app.factory('NextBackBasicService', function($route, $location) { 
    //array for keeping defined routes 
    var routes = []; 

    angular.forEach($route.routes, function(config, route) { 
    //not to add same route twice 
    if (angular.isUndefined(config.redirectTo)) { 
     routes.push(route); 
    } 
    }); 

    return { 
    goNext: function() { 
     var nextIndex = routes.indexOf($location.path()) + 1; 
     if (nextIndex === routes.length) { 
     $location.path(routes[0]); 
     } else { 
     $location.path(routes[nextIndex]); 
     } 
    }, 
    goBack: function() { 
     var backIndex = routes.indexOf($location.path()) - 1; 
     if (backIndex === -1) { 
     $location.path(routes[routes.length - 1]); 
     } else { 
     $location.path(routes[backIndex]); 
     } 
    } 
    }; 

}); 

現在我們可以注入任何你想去的地方我們的服務並調用我們的功能與ng-click指令......

app.run(function($rootScope, NextBackBasicService){ 
    $rootScope.goNext = function() { 
    NextBackBasicService.goNext(); 
    }; 

    $rootScope.goBack = function() { 
    NextBackBasicService.goBack(); 
    }; 
}); 

這裏的PLUNKER這個例子...

ADVANCE

而是採用簡單$route性能可以擴展這些對象它可以讓你更靈活的選擇...

例如只是這樣定義

when('/route1', { 
    templateUrl: 'example.html', 
    order: 1, 
    controller: 'MainCtrl' 
    }) 

你的路線，現在你可以達到這個財產在服務

angular.forEach($route.routes, function(config, route) { 
    //this will give us order that we set in config 
    console.log(route.order); 
    }); 

你可以用這種方法定義更復雜的結構...

Answer 2

我可以建議你使用ui路由器模塊嗎？它有一些功能可以幫助你，例如$ state.go（'你想要的狀態'），本質上這些狀態與視圖相似。看看here

與$ state.go綁定到你向前或向後，你可以從一個國家到另一個

這裏plunker with the states

Answer 3

一個更好的方法來完成，這是有導航控制器（或.service），在您的應用中有一系列視圖並跟蹤活動視圖。 goBack()和goNext()方法會根據需要增加/減少活動視圖數量。在這裏你怎麼可以這樣做：

的index.html

<div ng-controller="NavController"> 
    <div ng-view></div> 

    <a href="" data-ng-click="goBack()"> Back </a> 
    <a href="" data-ng-click="goNext()"> Next </a> 
</div> 

NavController

app.controller("NavController", function ($scope, $location, $log) { 
    var active_view = 0, 
     paths = ["home", "first", "second", "third"], 
     max_active = paths.length - 1; 

    function gotoActiveView() { 
    var view = paths[active_view]; 
    $location.path(view); 
    } 

    $scope.goBack = function() { 
    if (active_view <= 0) { 
     active_view = max_active; 
    } else { 
     active_view -= 1; 
    } 
    gotoActiveView(); 
    }; 

    $scope.goNext = function() { 
    if (active_view >= max_active) { 
     active_view = 0; 
    } else { 
     active_view += 1; 
    } 
    gotoActiveView(); 
    } 

}); 

這裏是一個工作plunker：

http://plnkr.co/edit/kd8nyHBWDg6JqHoeXg5l?p=preview