AngularJS 1.6路由异常：无法通过ng-view显示用户列表

我帮你排查了代码里的几个核心问题，这些就是导致ng-view无法正常展示用户列表的原因，下面一步步给你修复方案：

问题分析 #

1. 数据共享断层：你的apiService没有保存选中的组ID，当你在groupctrl里调用apiService.getusers(idgroup)后跳转到/users，usersctrl再调用apiService.getusers()时，服务里没有记住之前的组ID，自然拿不到对应组的用户数据。
2. 重复控制器绑定：users.html里额外加了ng-controller="usersctrl"，但你的路由已经给/users路径指定了这个控制器，重复绑定会创建一个全新的控制器实例，和路由里的实例不是同一个，根本拿不到数据。
3. 路由模板错误：你把index.html作为根路径的模板，这会导致整个页面嵌套在ng-view里，造成循环加载的问题，应该把组列表单独抽成一个独立模板。

修复后的代码 #

1. 重构apiService（service.js） #

让服务维护选中的组ID，确保控制器之间能共享数据：

app.service('apiService', function($q) {
    // 模拟接口数据，实际替换成真实API请求即可
    const mockGroups = [
        { uuid: 1, name: "前端开发组" },
        { uuid: 2, name: "后端开发组" }
    ];
    const mockUsers = {
        1: [{ name: "张三", index: 1 }, { name: "李四", index: 2 }],
        2: [{ name: "王五", index: 3 }, { name: "赵六", index: 4 }]
    };

    let selectedGroupId = null;

    this.getgroup = function() {
        return $q.resolve(mockGroups);
    };

    this.getusers = function(groupId) {
        if (groupId) {
            selectedGroupId = groupId;
            return $q.resolve(mockUsers[groupId] || []);
        }
        return $q.resolve(mockUsers[selectedGroupId] || []);
    };
});

2. 调整路由配置（route.js） #

把根路径的模板改成单独的组列表模板，同时给/users路由添加可选参数：

app.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    $locationProvider.hashPrefix('!');
    $routeProvider
        .when('/', {
            templateUrl: 'groups.html',
            controller: 'groupctrl'
        })
        .when('/users/:groupId?', {
            templateUrl: 'users.html',
            controller: 'usersctrl'
        })
        .otherwise({redirectTo: '/'});
}]);

3. 创建单独的组列表模板（groups.html） #

把index.html里的组列表部分移到这个文件：

<div class="well">
    <ul ng-repeat="grp in group">
        <li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
    </ul>
</div>

4. 修改index.html #

移除多余的ng-controller，只保留ng-view：

<!DOCTYPE html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My application</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<div ng-view></div>
</body>
<script src="assets/angular.min.js"></script>
<script src="assets/angular-route.min.js"></script>
<script src="controllers/app.js"></script>
<script src="controllers/route.js"></script>
<script src="controllers/service.js"></script>
<script src="controllers/mainctrl.js"></script>
</html>

5. 简化users.html #

移除重复的ng-controller绑定：

<div ng-repeat="user in users">
    <div class="well text-center">
        <h2>{{ user.name }}</h2>
        <h5>{{ user.index }}</h5>
        <button class="btn btn-success" ng-click="edit(user.index)">EDIT</button>
        <button class="btn btn-danger" ng-click="delete(user.index)">DELETE</button>
    </div>
</div>

6. 优化控制器逻辑（mainctrl.js） #

让usersctrl优先从路由参数获取组ID，提升页面刷新后的可用性：

app
.controller('groupctrl', function($scope, $location, apiService) {
    $scope.hello = "hello 123";
    apiService.getgroup().then(function(data){
        $scope.group = data;
    });
    $scope.displayusers = function(idgroup){
        // 把组ID放到路由参数里，刷新页面也能保留状态
        $location.path('/users/' + idgroup);
    };
})
.controller('usersctrl', function($scope, apiService, $routeParams) {
    const groupId = $routeParams.groupId;
    if (groupId) {
        apiService.getusers(groupId).then(function(data){
            $scope.users = data;
        });
    } else {
        apiService.getusers().then(function(data){
            $scope.users = data;
        });
    }
});

关键修复点总结 #

• 服务层需要维护共享状态（选中的组ID），确保不同控制器之间能传递数据
• 不要在路由模板里重复绑定控制器，避免创建多个独立实例
• 根路由模板不要用整个index.html，防止页面嵌套循环
• 利用路由参数传递关键数据，提升页面的可刷新性和可用性

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