如何用 html 页面替换模态对话框?我需要在不使用模态对话框的情况下重定向到 html 页面
How to replace modal dialog with a html page? I need to redirect to a html page without using modal dialog box
我目前正在 jhipster 的帮助下开发一个网络应用程序,它使用 bootstrap 和 angular js。
当我创建一个实体(例如:部门)时,它会为我生成 CRUD 操作。
当我尝试创建一个部门时,它显示了一个弹出窗口,他们称之为 MODAL
但我希望它在单独的页面中而不是作为弹出窗口。
如何将其从模态文件更改为 html 文件?
我的state.js文件
.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');
});
}]
})
这是你们想让我做的吗?
.state('department.new', {
parent: 'department',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
views: {
'content@': {
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');
}),
})
请说明您当前的状态是 部门,要创建新部门,您需要创建状态 department.new。
如果是那么直接传递模板url你不需要打开uib模式。
.state('department.new', {
url: '/新/',
控制器:'DepartmentDialogController',
控制器为:'vm',
模板网址:'app/entities/department/department-dialog.html'
})
就像任何其他非弹出式页面一样,您已经找到了您需要的内容,但进行了一些微小的修改和更正,例如 translatePartialLoader。
.state('department.new', {
parent: 'department',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
views: {
'content@': {
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
};
}
})
我目前正在 jhipster 的帮助下开发一个网络应用程序,它使用 bootstrap 和 angular js。
当我创建一个实体(例如:部门)时,它会为我生成 CRUD 操作。
当我尝试创建一个部门时,它显示了一个弹出窗口,他们称之为 MODAL
但我希望它在单独的页面中而不是作为弹出窗口。
如何将其从模态文件更改为 html 文件?
我的state.js文件
.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');
});
}]
})
这是你们想让我做的吗?
.state('department.new', {
parent: 'department',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
views: {
'content@': {
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');
}),
})
请说明您当前的状态是 部门,要创建新部门,您需要创建状态 department.new。
如果是那么直接传递模板url你不需要打开uib模式。 .state('department.new', { url: '/新/', 控制器:'DepartmentDialogController', 控制器为:'vm', 模板网址:'app/entities/department/department-dialog.html' })
就像任何其他非弹出式页面一样,您已经找到了您需要的内容,但进行了一些微小的修改和更正,例如 translatePartialLoader。
.state('department.new', {
parent: 'department',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
views: {
'content@': {
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
};
}
})