Angular Next and Previous button



我正在尝试为我的应用程序创建下一个和上一个按钮。

所有页面都使用一个控制器。我是angular的新手,关于如何为用户在控制器中的页面中向前或向后点击提供导航,有什么建议吗?

  $routeProvider.
  
    when("/", {
	templateUrl: "partials/home.html", 
	controller: "PageCtrl"}).
	
	when("/c1", {
		templateUrl: "categories/category1.html", 
		controller: "PageCtrl"})
		
	 .when("/category2", {
		 templateUrl: "categories/category2.html", 
		 controller: "PageCtrl"}) 	 
		 
	  .when("/category3", {
	  		templateUrl: "categories/category3.html", 
	  		controller: "PageCtrl"})
	  .when("/category4", {
	  	templateUrl: "categories/category4.html", 
	  	controller: "PageCtrl"})
	  .when("/category5", {
	  	templateUrl: "categories/category5.html", 
	  	controller: "PageCtrl"})
	  .when("/category6", {
	  	templateUrl: "categories/category6.html", 
	  	controller: "PageCtrl"})
	  .when("/category7", {
	  	templateUrl: "categories/category7.html", 
	  	controller: "PageCtrl"})
	  .when("/category8", {
	  	templateUrl: "categories/category8.html", 
	  	controller: "PageCtrl"})
	  .when("/category9", {
	  	templateUrl: "categories/category9.html", 
	  	controller: "PageCtrl"})

您可以使用路由名称向$rootScope添加一个数组。例如

$rootScope.routeNames = ['/category7','/category8']

然后在$routeProvider 中引用数组

然后,函数将根据当前路线确定下一条路线。

每页上的下一个按钮将引用该函数来确定下一页的链接。

或者,您可以将您的路由重命名为r1、r2等,然后可以很容易地为下一个链接确定下一个路由。

如果你想在点击按钮时浏览你的视图,你只需要定义一个按钮如下:

myFile.html

<button class="myBtn" type="submit" ng-href="#c1"> 
</button>

您只需要使用ng-href= "#whereYouWantToGo"。你可以去掉#。如果你真的愿意,可以在SO.中查看一些关于它的答案

当然,通过这种方式,你可以为每个视图定义两个按钮,一个返回,一个继续。你还应该能够用两个唯一的id或名称来识别这两个按钮(包括在你需要它们的页面中),并使用ng-include或类似的方法将不同的路径传递给ng-ref,而且,你还应该为每个按钮类型保留一个CSS类。

我希望我能帮上忙。

最新更新