Angularjs 为视图创建下一步/上一步按钮

我目前正在学习angular，我想创建下一个/上一个按钮来显示不同的视图

我有一个名为

example.html

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

我有一个

header.html

，它包含在我的

index.html

中：

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

这个很好用

---

我的问题是，这是一个好方法还是有更好的方法？

我可以建议您使用ui路由器模块吗？它有一些可以帮助您的函数，例如$state.go（'state that you want'），本质上这些状态与视图类似。看一看

使用$state.go向前或向后绑定，您可以从一个状态转到另一个状态

---

这里是

我可以建议您使用ui路由器模块吗？它有一些可以帮助您的函数，例如$state.go（'state that you want'），本质上这些状态与视图类似。看一看

使用$state.go向前或向后绑定，您可以从一个状态转到另一个状态

---

这里的

实现这一点的一个更好的方法是在应用程序中有一个导航控制器（或

.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>

导航控制器

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

});

app.controller（“导航控制器”，函数（$scope、$location、$log）{
var active_view=0，
路径=[“主”、“第一”、“第二”、“第三”]，
max_active=path.length-1；
函数gotoActiveView（）{
变量视图=路径[活动视图]；
$location.path（视图）；
}
$scope.goBack=函数（）{
如果（活动视图=最大活动）{
活动视图=0；
}否则{
活动视图+=1；
}
gotoActiveView（）；
}
});

这是一个正在工作的plunker：

---

实现这一点的更好方法是在应用程序中安装一个导航控制器（或

.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>

导航控制器

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

});

app.controller（“导航控制器”，函数（$scope、$location、$log）{
var active_view=0，
路径=[“主”、“第一”、“第二”、“第三”]，
max_active=path.length-1；
函数gotoActiveView（）{
变量视图=路径[活动视图]；
$location.path（视图）；
}
$scope.goBack=函数（）{
如果（活动视图=最大活动）{
活动视图=0；
}否则{
活动视图+=1；
}
gotoActiveView（）；
}
});

这是一个正在工作的plunker：

---

而不是静态解决方案就像按顺序给出路径数组一样，您可以使用

$route

因此，为了动态获取路由，我们将使用

$route

基础

只需在我们的服务中注入

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

});

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

现在，我们可以将我们的服务注入到您想要的任何地方，并使用

ng click

指令调用我们的函数

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

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

下面是这个例子的例子

前进

不使用简单的

$route

属性，您可以扩展这些对象，从而提供更灵活的替代方案

例如，只需像这样定义您的路线

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

现在，您可以在服务中访问该属性

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

});

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

---

您可以使用这种方法定义更复杂的结构…

而不是静态解决方案就像按顺序给出路径数组一样，您可以使用

$route

因此，为了动态获取路由，我们将使用

$route

基础

只需在我们的服务中注入

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

});

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

现在，我们可以将我们的服务注入到您想要的任何地方，并使用

ng click

指令调用我们的函数

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

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

下面是这个例子的例子

前进

不使用简单的

$route

属性，您可以扩展这些对象，从而提供更灵活的替代方案

例如，只需像这样定义您的路线

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

现在，您可以在服务中访问该属性

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

});

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

---

通过这种方法，您可以定义更复杂的结构…

您可以使用共享服务来完成逻辑并干掉您的东西（$scope.goBack=routeService.goBack（））。但是在如何实现这一点上有很多选择，所以我认为这是主要观点based@Sprottenwels你能给我一个如何使用服务擦干我的代码的例子吗？@Vucko你有没有计划使用带有参数的path？@wickY26没有，路径将只是简单的名称。你可以使用共享服务来完成逻辑和擦干你的东西（$scope.goBack=routeService.goBack（））.但如何实现这一目标有很多选择，所以我认为这是主要观点based@Sprottenwels你能给我一个如何使用服务来干燥代码的例子吗？@Vucko你有计划使用带参数的路径吗？@Wick26没有，路径将只是简单的名称。你能使用ui路由器模块制作一个小提琴吗？你能制作一个小提琴吗e使用ui路由器模块？+1更喜欢您的解决方案，它将更有用，因为我不必将路由放入阵列：）@Vucko您可以通过扩展路由对象来构建高级结构。。。我在考虑一个类似链表的结构…+1更喜欢你的解决方案，它会更有用，因为我不必将路由放入数组：）@Vucko你可以构建