AngularJS：如何从一个控制器重定向到另一个？原生页面切换方式

嘿，我来帮你理清AngularJS里控制器跳转和页面切换的事儿～先明确一个关键点：AngularJS里控制器本身并不直接负责页面跳转，因为控制器是管视图逻辑的，跳转本质上是路由层面的操作——也就是通过路由把URL/state和对应的控制器、视图绑定，然后触发路由切换来实现“跳转到另一个控制器对应的页面”。

一、从一个控制器重定向到另一个控制器（路由跳转） #

根据你项目用的路由方案（你提到了state，大概率是ui-router；如果是官方基础路由就是ngRoute），分两种情况说明：

1. 用ui-router（带state的场景） #

先在控制器里注入$state服务，然后调用$state.go()方法跳转到目标state（这个state已经在路由配置里绑定了对应的控制器）：

// 示例：当前控制器是UserController，跳转到绑定了DashboardController的state
app.controller('UserController', function($state) {
  this.jumpToDashboard = function() {
    // 直接跳转到名为"dashboard"的state
    $state.go('dashboard');
    
    // 如果需要传递参数，比如用户ID，可以这么写：
    // $state.go('dashboard', { userId: 123 });
  };
});

2. 用官方ngRoute模块 #

注入$location服务，调用$location.path()跳转到目标URL（该URL已在路由配置中绑定对应控制器）：

app.controller('UserController', function($location) {
  this.jumpToDashboard = function() {
    // 跳转到对应DashboardController的URL路径
    $location.path('/dashboard');
  };
});

二、AngularJS原生的页面切换方式 #

AngularJS作为单页应用框架，所谓的“页面切换”其实是路由视图的切换，官方原生支持的方式是用ngRoute模块，另外社区广泛使用的ui-router也属于标准方案（虽然是第三方，但几乎是AngularJS项目的标配）：

1. 官方原生ngRoute方式 #

步骤1：配置路由

先引入ngRoute模块（需要加载angular-route.js脚本），然后在模块中配置URL与控制器、视图的绑定：

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
  $routeProvider
    // 配置/user路径，对应UserController和user.html视图
    .when('/user', {
      templateUrl: 'user.html',
      controller: 'UserController',
      controllerAs: 'userCtrl'
    })
    // 配置/dashboard路径，对应DashboardController和dashboard.html视图
    .when('/dashboard', {
      templateUrl: 'dashboard.html',
      controller: 'DashboardController',
      controllerAs: 'dashCtrl'
    })
    // 默认跳转路径
    .otherwise({ redirectTo: '/user' });
});

步骤2：视图中触发切换

• 用ng-href指令直接跳转（无需控制器逻辑）：

<a ng-href="#/dashboard">点击跳转到仪表盘</a>

• 或者通过按钮触发控制器中的方法（就是上面第一部分的代码）：

<button ng-click="userCtrl.jumpToDashboard()">跳转仪表盘</button>

2. ui-router方式（带state的场景） #

如果你的项目用了ui-router（支持state层级，更灵活），原生切换方式有两种：

• 在视图中用ui-sref指令直接跳转到目标state：

<!-- 直接跳转到dashboard state -->
<a ui-sref="dashboard">去仪表盘</a>

<!-- 带参数跳转，比如用户详情页 -->
<a ui-sref="user.detail({ userId: 123 })">查看用户123的详情</a>

• 在控制器中用$state.go()（和第一部分的示例一致）。

内容的提问来源于stack exchange，提问作者robert