AngularJS-$StateProvider.state的导航问题

我开发了一个单页应用程序。它有用户、角色和权限选项卡。“用户”选项卡的主页显示所有可用用户。“角色”选项卡的主页显示所有可用角色。角色的每一行有两个按钮（删除按钮和角色详细信息按钮）。若我点击roledetails按钮，它应该导航到roledetails页面，但它正在导航到用户主页。这里是myapp.js文件，它具有路由配置。strong文本 你能在这个问题上帮助我吗。配置看起来正确。但导航并不像预期的那样。谢谢你的帮助

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>

angular.module（'userRoles'[
“模板应用程序”，
“通用模板”，
“样板，家”，
“样板。关于”，
“ui.router”，
“用户模块”，
“roleModule”，
“许可模块”
]).config（moduleConfig）；
moduleConfig.$inject=['$stateProvider'，'$urlRouterProvider']；
函数模块配置（$stateProvider，$urlRouterProvider）{
$stateProvider
.state（'应用程序'{
url:“/”，
观点：{
“标题”：{
templateUrl:“home/header.tpl.html”
},
“页脚”：{
templateUrl:“home/footer.tpl.html”
},
“内容”：{
/*templateUrl:“user/alluser/showAllUsers.tpl.html”，
控制器：“ViewAllUsersController”，
controllerAs:'viewUsers'*/
}
}
})
.state（'app.user'{
url:“#用户”，
观点：{
“内容”：{
templateUrl:“user/alluser/showAllUsers.tpl.html”，
控制器：“ViewAllUsersController”，
controllerAs:'viewUsers'
}
}
})
.state（'app.user.userDetails'{
url:“#用户/：id”，
观点：{
“内容”：{
templateUrl:“user/userDetails/userDetails.tpl.html”，
控制器：“userDetailController”，
controllerAs:'userDetailCntrl'
}
}
})
.state（'app.user.deleteUser'{
url:“#用户/：id”，
观点：{
“内容”：{
templateUrl:“user/deleteUser/deleteUser.tpl.html”，
控制器：“deleteUserController”，
controllerAs:'deleteUser'
}
}
})
.state（'应用程序角色'{
url:“#角色”，
观点：{
“内容”：{
templateUrl:“role/allRoles/showAllRoles.tpl.html”，
控制器：“viewAllRolesController”，
controllerAs:“视图角色”
}
}
})
.state（'app.role.roledeail'{
url:“#roleDetails/：roleId”，
观点：{
“内容”：{
templateUrl:“role/roleDetails/roleDetails.tpl.html”，
控制器：“roleDetailController”，
controllerAs:“roleDetails”
}
}
})
.state（'app.role.deleteRole'{
url:“#rolesDelete/：roleId”，
控制器：“DeleteRoleControl”，
controllerAs:'deleteRole'，
观点：{
“内容”：{
templateUrl:“role/allRoles/showAllRoles.tpl.html”
}
}
})
.state（'app.permission'{
url:“#权限”，
观点：{
“内容”：{
templateUrl:“权限/allPermissions/showAllPermissions.tpl.html”，
控制器：“viewAllPermissionsController”，
controllerAs:“查看权限”
}
}
})
.state（'app.permission.deletePermission'{
url:“#权限/：名称”，
观点：{
“内容”：{
templateUrl:“权限/deletePermission/deletePermission.tpl.html”，
控制器：“deletePermissionController”，
controllerAs:'deletePermissions'
}
}
})
;
/*$urlRouterProvider。否则（'/'）*/
}
displayRoles.tpl.html:：
行动
删除
角色ID
角色名
{{role.roleId（）}}
{{role.roleName（）}}

列表项

---

“导航不符合预期”的确切程度如何？您能否更清楚地描述您期望发生的事情以及实际发生的事情，以便我们更好地了解问题/问题是什么？displayRoles.tpl.html文件有一个操作按钮，用于显示角色详细信息页面。若我单击此操作按钮，应用程序应该导航到角色详细信息页面，而不是导航到作为应用程序主页的用户页面。因此，预期的行为是导航到角色详细信息页面。遇到错误时，ui-router将导航到应用程序的基本路径。此行为意味着roleDetail按钮的方法可能存在问题。如果将roleDetail按钮更改为仅具有ui sref=“app.role.ro