Hey there! Currently, I'm working on an app using the IONIC Framework and running into some issues with user validation errors. Below, you'll find a snippet of the logic I've implemented:
app.js:
angular.module('skulApp', ['ionic', 'ionic-material', 'ionMdInput', 'ngCordova'])
.run(function($ionicPlatform, $rootScope, $state, AUTH_EVENTS, _Auth_Service, sqliteService){
$ionicPlatform.ready(function(){
if (window.cordova && window.cordova.plugins.Keyboard)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
if (window.StatusBar)
StatusBar.styleDefault();
sqliteService.preloadDataBase(true);
});
$rootScope.$on('$stateChangeStart', function(event, next, nextParams, fromState) {
if ('data' in next && 'authorizedRoles' in next.data) {
var authorizedRoles = next.data.authorizedRoles;
if (!_Auth_Service.isAuthorized(authorizedRoles)) {
event.preventDefault();
$state.go($state.current, nextParams, {reload: true});
$rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
}
}
if (!_Auth_Service.isAuthenticated()) {
if (next.name !== 'login') {
event.preventDefault();
$state.go('login');
}
}
});
})
app.config.js:
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, USER_ROLES) {
$stateProvider
.state('main', {
url: '/',
abstract: true,
templateUrl: 'templates/main.html'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('main.dashboard', {
url: 'main/dashboard',
views: {
'menuContent': {
templateUrl: 'templates/dashboard.html',
controller: 'DashboardCtrl'
},
'fabContent': {
template: '<button id="fab-profile" class="button button-fab button-fab-bottom-right button-energized-900" ui-sref="main.edit"><i class="icon ion-edit"></i></button>',
controller: function($timeout) {
$timeout(function() {
document.getElementById('fab-profile').classList.toggle('on');
}, 800);
}
}
},
data: {
authorizedRoles: [
USER_ROLES.admin,
USER_ROLES.teacher,
USER_ROLES.father
]
}
})
.state('main.edit', {
url: 'main/edit',
views: {
'menuContent': {
templateUrl: 'templates/edit.html',
controller: 'EditCtrl'
},
'fabContent': {
template: ''
}
}
});
$urlRouterProvider.otherwise(function($injector, $location){
var $state = $injector.get("$state");
$state.go('main.dashboard');
});
});
The error that's popping up is:
Error: Cannot transition to abstract state '[object Object]'
at Object.transitionTo (ionic.bundle.js:40332)
at Object.go (ionic.bundle.js:40262)
at app.js:52
at Scope.$broadcast (ionic.bundle.js:23003)
at Object.transitionTo (ionic.bundle.js:40395)
at Object.go (ionic.bundle.js:40262)
at app.config.js:210
at check (ionic.bundle.js:39247)
at update (ionic.bundle.js:39259)
at Scope.$broadcast (ionic.bundle.js:23003)
The specific line causing trouble in app.js is:
$state.go($state.current, nextParams, {reload: true});
Note that I haven't included services, constants, controllers, policies, etc., but if you feel like it's necessary, please let me know and I'll update the question accordingly. Any help would be greatly appreciated!