AngularJS - 使用$ StateProvider.state导航问题

Question

我开发了一个单页面应用程序。它具有用户，角色和权限选项卡。 “用户”主页选项卡显示所有可用用户。 “角色”选项卡的主页显示所有可用角色。每行角色都有两个按钮（删除按钮和roledetails按钮）。如果我点击roledetails按钮，它应该导航到roleDetails页面，但它导航到用户主页。这是myapp.js文件，其中包含路由配置。强文     你可以帮我解决这个问题。配置看起来正确。但导航并不像预期的那样。任何帮助表示赞赏..

angular.module('userRoles', [
        'templates-app',
        'templates-common',
        'ngBoilerplate.home',
        'ngBoilerplate.about',
        'ui.router',
        'userModule',
        'roleModule',
        'permissionModule'
    ]).config(moduleConfig);

    moduleConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
    function moduleConfig($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('app', {
                url: '/',
                views: {
                    'header': {
                        templateUrl: "home/header.tpl.html"
                    },
                    'footer': {
                        templateUrl: "home/footer.tpl.html"
                    },
                    'content': {
                       /* templateUrl: "user/allUsers/showAllUsers.tpl.html",
                        controller: 'ViewAllUsersController',
                        controllerAs:'viewUsers'*/
                    }
                }


            })
            .state('app.user', {
                url: '#users',
                views: {
                    'content@': {
                        templateUrl: "user/allUsers/showAllUsers.tpl.html",
                        controller: 'ViewAllUsersController',
                        controllerAs:'viewUsers'
                    }
                }
            })
            .state('app.user.userDetails', {
                url: '#users/:id',
                views: {
                    'content@': {
                        templateUrl: "user/userDetails/userDetails.tpl.html",
                        controller: 'userDetailController',
                        controllerAs:'userDetailCntrl'
                    }
                }
            })
            .state('app.user.deleteUser', {
                url: '#users/:id',
                views: {
                    'content@': {
                        templateUrl: "user/deleteUser/deleteUser.tpl.html",
                        controller: 'deleteUserController',
                        controllerAs:'deleteUser'
                    }
                }
            })
            .state('app.role', {
                url: '#roles',
                views: {
                    'content@': {
                        templateUrl: "role/allRoles/showAllRoles.tpl.html",
                        controller: 'viewAllRolesController',
                        controllerAs:'viewRoles'
                    }
                }
            })
            .state('app.role.roleDetail', {
                url: '#roleDetails/:roleId',
                views: {
                    'content@': {
                        templateUrl: "role/roleDetails/roleDetails.tpl.html",
                        controller: 'roleDetailController',
                        controllerAs:'roleDetails'

                    }
                }
            })
            .state('app.role.deleteRole', {
                url: '#rolesDelete/:roleId',
                controller: 'deleteRoleController',
                controllerAs:'deleteRole',
                views: {
                    'content@': {
                        templateUrl: "role/allRoles/showAllRoles.tpl.html"
                    }
                }
            })
            .state('app.permission', {
                url: '#permissions',
                views: {
                    'content@': {
                        templateUrl: "permission/allPermissions/showAllPermissions.tpl.html",
                        controller: 'viewAllPermissionsController',
                        controllerAs:'viewPermissions'
                    }
                }
            })
            .state('app.permission.deletePermission', {
                url: '#permissions/:name',
                views: {
                    'content@': {
                        templateUrl: "permission/deletePermission/deletePermission.tpl.html",
                        controller: 'deletePermissionController',
                        controllerAs:'deletePermissions'
                    }
                }
            })
            ;



       /* $urlRouterProvider.otherwise('/');*/
    }

displayRoles.tpl.html ::

<div class="row">
    <div class="col-xs-11">
        <h3></h3>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Action</th>
                <th>Delete</th>
                <th ng-click="viewRoles.sortBy='roleId'; viewRoles.sortOrder = !viewRoles.sortOrder;">Role ID</th>
                <th ng-click="viewRoles.sortBy='roleName'; viewRoles.sortOrder = !viewRoles.sortOrder;">Role Name</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="role in viewRoles.roleList | filter:viewRoles.searchTxt | orderBy:viewRoles.sortBy:viewRoles.sortOrder">
                <td><a ui-sref="app.role.roleDetail({roleId: role.roleId()})"><span
                        class="glyphicon glyphicon-hand-right"></span></a>
                </td>
                 <td><a ui-sref="app.role.deleteRole({roleId: role.roleId()})"><span class="glyphicon glyphicon-remove"></span></a>
                 </td>
                <td>{{role.roleId()}}</td>
                <td>{{role.roleName()}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

1. 列表项