Nested view states with AngularJS
(function() {
'use strict';
angular
.module('app.discussion')
.controller('SingleDiscussionController', SingleDiscussionController);
SingleDiscussionController.$inject = ['$rootScope', '$scope', '$stateParams','userService','$timeout','discussionService','$uibModal', '$state', 'localStorageService', 'evalService'];
function SingleDiscussionController($rootScope, $scope, $stateParams, userService, $timeout, discussionService, $uibModal, $state, localStorageService, evalService) {
var vm = this;
vm.timeAgo = timeAgo;
//
$scope.discussionId = $stateParams.discussionId;
$scope.discussion = discussionService.getDiscussion($scope.discussionId);
console.log('$scope.discussion', $scope.discussion);
}
})();<!-- navigation -->
<span class="glyphicon glyphicon-envelope" data-toggle="tooltip" title="Discussion" data-placement="top" ui-sref="app.discussion.list"></span>return {
getDiscussionsByUser: getDiscussionsByUser,
getDiscussion: getDiscussion
};
//get discussion based on current logged in user
function getDiscussionsByUser (user_id) {
return $resource(DiscussionBaseURI + '/')
.get({filterUser: user_id})
.$promise
.then(successCallback);
function successCallback(response) {
discussions = response.data;
return response;
}
}
//get single discussion
function getDiscussion(discussionId) {
return discussions[discussionId];
}(function() {
'use strict';
angular
.module('app.discussion')
.config(['$stateProvider', '$urlRouterProvider', discussionConfig]);
function discussionConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.discussion', {
url: '/discussion',
controller: 'DiscussionController',
controllerAs: 'vm',
templateUrl: 'assets/discussion/discussion.html',
data: {
requireLogin: true
},
resolve: {
// vpp: clientResolve,
// vppBis: vppBisResolve
},
params: {
vpp: {},
appId: null
},
abstract: true,
})
.state('app.discussion.list', {
url: '/list',
views: {
'discussionContent': {
templateUrl: 'assets/discussion/discussion-list.html'
},
}
})
.state('app.discussion.view', {
url: '/list//:discussionId',
views: {
'discussionContent': {
templateUrl: 'assets/discussion/view-discussion.html',
controller: 'SingleDiscussionController'
},
}
});
}
})();<!-- inject discussion content -->
<div ui-view="discussionContent"></div><div class="inbox-body">
<div class="mail-option">
<div class="chk-all">
<input type="checkbox" class="mail-checkbox mail-group-checkbox">
<div class="btn-group">
<a data-toggle="dropdown" href="#" class="btn mini all" aria-expanded="false">
All
<i class="fa fa-angle-down "></i>
</a>
<ul class="dropdown-menu">
<li><a href="#"> None</a></li>
<li><a href="#"> Read</a></li>
<li><a href="#"> Unread</a></li>
</ul>
</div>
</div>
<div class="btn-group">
<a data-original-title="Refresh" data-placement="top" data-toggle="dropdown" href="#" class="btn mini tooltips">
<i class=" fa fa-refresh"></i>
</a>
</div>
<div class="btn-group hidden-phone hide">
<a data-toggle="dropdown" href="#" class="btn mini blue" aria-expanded="false">
More
<i class="fa fa-angle-down "></i>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil"></i> Mark as Read</a></li>
<li><a href="#"><i class="fa fa-ban"></i> Spam</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
</ul>
</div>
<div class="btn-group hide">
<a data-toggle="dropdown" href="#" class="btn mini blue">
Move to
<i class="fa fa-angle-down "></i>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil"></i> Mark as Read</a></li>
<li><a href="#"><i class="fa fa-ban"></i> Spam</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
</ul>
</div>
<ul class="unstyled inbox-pagination">
<li><span>1-{{ meta.pagination.count }} of {{ meta.pagination.total }}</span></li>
<li>
<a class="np-btn" href="#"><i class="fa fa-angle-left pagination-left"></i></a>
</li>
<li>
<a class="np-btn" href="#"><i class="fa fa-angle-right pagination-right"></i></a>
</li>
</ul>
</div>
<table class="table table-inbox table-hover">
<tbody>
<tr class="unread" ng-repeat="discussion in discussions" ui-sref="app.discussion.view({discussionId: $index})" >
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class="inbox-small-cells"><i class="fa fa-star"></i></td>
<td class="view-message dont-show">{{ discussion.user.data.name }}</td>
<td class="view-message">{{ discussion.subject }}</td>
<td class="view-message inbox-small-cells"></td>
<td class="view-message text-right" ng-init="timeago = vm.timeAgo(discussion.updated_at.date)" >{{ timeago }}</td>
</tr>
</tbody>
</table>
</div>