Hugo
Hugo

Reputation: 170

Angular UI Router - using ui-sref on child view to change parent view

Im fairly new to angular UI. I am trying to have a ui-view that has a child a tag that has an sref that will change its parent ui-view

Something like this:

<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>

This is a small mockup of what I'm intending to do but ultimately, all I want to do is have a template with a table of items, and once you press on one of those items, the table template would be replaced with the details of that item, along with its state and url.

So the hierarchy is something like:
/club/list
/club/:clubId

Upvotes: 0

Views: 392

Answers (1)

Spider
Spider

Reputation: 138

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

if you have only one state with params as id, you can send id as new or any other keyword for the first time and manipulate the html with ng-if on whether you receive id as 'new' or the file id. if you receive new in id parameter show the table else if you receive proper id show the file data.

Upvotes: 1

Related Questions