mercredi 25 mai 2016

Can't open another child state from parent route

Here is my code

app.js

'use strict';
angular
  .module('nameApp', ['ngResource','ui.router','ngRoute'])
  .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

            // route for the main body
            .state('app', {
                url:'/',
                abstract: true,
                views:{
                    'bodyLogin': {
                        templateUrl : 'views/login/body.html'
                    },
                    'bodyMain': {
                        templateUrl : 'views/main/body.html'
                    }
                }
            })

            //route for unregistered user
            .state('app.mainUnreg', {
                url:'',
                views: {
                    'content@app': {
                        templateUrl : 'views/login/home.html',
                        controller  : ''
                    }
                }
            })

            //route for registered user

            .state('app.mainReg', {
                url:'',
                views: {
                    'header@app': {
                        templateUrl : 'views/main/header.html',
                        controller  : ''
                    },
                    'sidebar@app': {
                        templateUrl : 'views/main/sidebar.html',
                        controller  : ''
                    },
                    'middle@app': {
                        templateUrl : 'views/main/home.html',
                        controller  : ''
                    },
                    'footer@app': {
                        templateUrl : 'views/main/footer.html',
                    }
                }

            })

        $urlRouterProvider.otherwise('/');
    })
;

controller.js

.controller('BodyController', ['$scope', '$state', '$stateParams', '$rootScope', 'AuthFactory', function($scope, $state, $stateParams, $rootScope, AuthFactory){

    $scope.loggedIn = false;
    $scope.username = '';
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

    if($scope.loggedIn === false){
        $scope.layout = 'styles';
        $state.transitionTo('app.mainReg');
    }
    else{
        $scope.layout = 'login';
        $state.transitionTo('app.mainUnreg');
    }
}])

index.html

<html lang="en" ng-app="nameApp" ng-controller="BodyController">
    <head>....</head>
    <body>
        <div ng-if="loggedIn" ui-view="bodyLogin" class="site-wrapper" ui-sref-active="app.mainUnreg"></div>

        <div ng-if="!loggedIn" ui-view="bodyMain" ui-sref-active="app.mainReg"></div>

      <!-- some scripts -->
    </body>
</html>

I tried both in !loggedIn situation and I can successfully access my bodyLogin, but when I tried bodyMain, it failed.

But, if I delete my app.mainUnreg state, I can successfully access my bodyMain from my index

Can anyone help me to give any sitution, so I can dynamically access both state based on my loggedIn status from controller.js ?

Thank you.




Aucun commentaire:

Enregistrer un commentaire