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

时间:2016-08-25 10:31:27

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

我对角度UI很新。我正在尝试拥有一个ui-view,其中有一个带有sref的标记,该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>

这是我打算做的一个小模型,但最终,我想做的就是有一个带有项目表的模板,一旦你按下其中一个项目,表模板就会被该项目的详细信息及其状态和网址替换。

所以等级是这样的:
/俱乐部/列表
/俱乐部/:clubId

1 个答案:

答案 0 :(得分:1)

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

如果你只有一个状态为params作为id,你可以首次发送id作为新的或任何其他关键字,并使用ng-if操纵html是否收到id为&#39; new&#39;或文件ID。如果你收到新的id参数显示表,否则如果你收到正确的id显示文件数据。