cyberfly
6/5/2017 - 1:56 PM

Nested view states with AngularJS

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>