Reputation: 170
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
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