Angular UI Router - 在子视图上使用 ui-sref 来更改父视图答案

【问题标题】：Angular UI Router - using ui-sref on child view to change parent viewAngular UI Router - 在子视图上使用 ui-sref 来更改父视图
【发布时间】：2016-08-25 10:31:26
【问题描述】：

我对 Angular UI 相当陌生。我正在尝试拥有一个具有子项的 ui-view 一个具有 sref 的标签，该标签将更改其父 ui-view

类似这样的：

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="app">
        <h1>Hello</h1>
        <ul>
            <li>
                <a ui-sref="organisations">Click 1</a>      
            </li>
        </ul>

        <div ui-view="testview"></div>
    </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script>
    angular
        .module('app', ['ui.router'])
        .config(setViewStates)
    ;

    function setViewStates($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
            // Organisations
            .state('organisations', {
                url: '/',
                views: {
                    'testview': {
                        template: '<p>view 1</p><a ui-sref="organisations.club">Click</a>',
                    },
                }
            })
            .state('organisations.club', {
                url: '/club',
                views: {
                    'testview@': {
                        template: '<p>view 2</p>',
                        controller: function($scope) {
                            console.log('hello');
                        }
                    },
                }
            });
        ;
    }
</script>   

</html>

这是我打算做的一个小模型，但最终，我想做的只是有一个带有项目表的模板，一旦你按下其中一个项目，表格模板就会被替换包含该项目的详细信息，以及它的状态和 url。

所以层次结构类似于：
/俱乐部/名单
/club/:clubId

【问题讨论】：

标签： angularjs angular-ui-router frontend angular-ui

【解决方案1】：

.state('organisations', {
            url: '/:id',
            views: {
                'testview': {
                    template: '<p>view 1</p><a ui-sref="organisations({id : id_of_this_file})">Click</a>',
                },
            }
        })

如果您只有一个将参数作为 id 的状态，您可以第一次将 id 作为 new 或任何其他关键字发送，并使用 ng-if 操作 html，以确定您收到的 id 是“new”还是文件 id。如果您收到新的 id 参数，则显示表格，否则如果您收到正确的 id，则显示文件数据。

【讨论】：