Hope I can explain this clearly. First, I'm using ng-admin and I know how to create a custom view per this:
I'm trying to figure out how to create nested views within the same custom page. Specifically, I have a view that needs to have 3 columns on the page - each with their functionality (and services).
Example:
In the image below, I have 3 views.
The url to access this page should be myapp.com/ng-admin/#collections/collections/collection/1 (1 being the id of the item to view/edit)
My Code:
//collections state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections', {
abstract: true,
parent: 'ng-admin',
url: '/collections/',
controller: collectionsCtrl,
templateUrl: '/app/collectionsView.html'
});
//collection state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections.collection', {
parent: 'ng-admin',
url: '/collections/collection/:ID',
controller: collectionCtrl,
templateUrl: '/app/collectionView.html'
});
... ommiting first two controllers
Then in the collection item controller, I have:
myApp.controller('ItemViewCtrl', ['$scope', 'Events', '$stateParams', '$sce', function($scope, Events, $stateParams, $sce) {
$stateParams.ID && Collection.find($stateParams.ID).then(function(item) {
$scope.item = item;
});
$scope.view = function(id) {
$state.go('days.day', {
'ID': id
})
};
}]);
My collectionsView.html
<div ng-include src="'/app/tpl/collectionView.html'" include-replace>
</div>
<div class="inner-content full-height" ui-view></div>
In my collectionView.html
<ul>
<li ng-repeat="collections as collection" >
<a ui-sref="collections.collection.id">
Link to collection
</a>
</li>
<ul>
My Current Problem:
I can get collections/collection to show both views but it won't show the first column.
If I go to just collections/ I can see the first the column only (but only if I remove abstract:true from $stateParam router options.)
What am missing?
Solved:
This helped me realize that I didn't need the parent property or first part of the url since they're both inherited from parent when I 'statecollections.collection' as part of the $stateProvider.
//collection state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections.collection', {
// parent: 'ng-admin', <-REMOVED
url: '/collections/collection/:ID', // Didn't need the /collections part of the url
controller: collectionCtrl,
templateUrl: '/app/collectionView.html'
});