I am trying to show a modal box based on the url using Angular ui. I have three states - home, setting, and modal based on the setting state.
$stateProvider
.state('home',{
url:'/',
views: {
'content': {
templateUrl: 'views/partials/content.html',
controller: 'ContentCtrl'
}
})
.state('home.setting',{
url:'/setting',
views:{
'content@': {
templateUrl: '/views/partials/setting.html',
controller: 'SettingCtrl'
}
})
.state('home.setting.modal',{
url:'^/modal',
onEnter: function($state, $modal, $timeout, $stateParams, $location) {
if ($stateParams.id === "") {
return $location.path('/');
} else {
$modal.open({
templateUrl: 'views/modals/deepResultModal.html',
controller: "DeepResultCtrl",
}).result.then(function() {
}, function() {
return $location.path('/');
});
}
}
}
With this code, I keep getting this
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr? p0=myapp&p1=Error%3A%….setting.modal'%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Fve...<omitted>...e)
I tried "home.modal" state instead of "home.setting.modal", but it removes the parent state.
How can I show a modal box without removing a parent state? I followed this answer and I nested the states like "home.setting.modal" but it doesn't work.
It would be great if you can help me out! Thank you in advance!