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

<强>基本

只需将$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

更好的方法是在您的应用中使用导航控制器（或.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();
  }

});

这是一个工作的掠夺者：

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

Answer 3

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

$ state.go绑定你前进或后退你可以从一个州转到另一个

这里是plunker with the states

为视图创建下一个/后退按钮

3 个答案: