How to replace modal dialog with a html page? I need to redirect to a html page without using modal dialog box
I am currenty developing a web-app with the help of jhipster which uses bootstrap and angular js.
When i create an entity(example: Department), it produces CRUD operation for me.
When I try to create a department, it shows me a popup which they call MODAL
But i want this in a seperate page not as a popup.
How to change this from modal to a html file?
My state.js file
.state('department.new', {
parent: 'department',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/department/department-dialog.html',
controller: 'DepartmentDialogController',
controllerAs: 'vm',
backdrop: 'static',
size: 'lg',
resolve: {
entity: function () {
return {
deptId: null,
deptName: null,
id: null
};
}
}
}).result.then(function() {
$state.go('department', null, { reload: true });
}, function() {
$state.go('department');
});
}]
})
Is this what you all want me to do?
.state('department.new', {
parent: 'department',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
views: {
'[email protected]': {
templateUrl: 'app/entities/department/department-dialog.html',
controller: 'DepartmentDialogController',
controllerAs: 'vm',
}
},
resolve: {
entity: function () {
return {
deptId: null,
deptName: null,
id: null
};
}
}
.result.then(function() {
$state.go('department', null, { reload: true });
}, function() {
$state.go('department');
}),
})
Answers:
Just like any other non popup pages, you already found what you need but with some tiny modifications & corrections like translatePartialLoader.
.state('department.new', {
parent: 'department',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
views: {
'[email protected]': {
templateUrl: 'app/entities/department/department-dialog.html',
controller: 'DepartmentDialogController',
controllerAs: 'vm'
}
},
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('department');
return $translate.refresh();
}],
entity: function () {
return {
deptId: null,
deptName: null,
id: null
};
}
})
Please clarify that your current state is department and for creating a new department you have create a state department.new.
If yes then pass the template url directly you don't need to open the uib modal. .state('department.new', { url: '/new/', controller: 'DepartmentDialogController', controllerAs: 'vm', templateUrl: 'app/entities/department/department-dialog.html' })