javascript - 如何用html页面替换模态对话框?我需要重定向到 html 页面而不使用模式对话框

标签 javascript angularjs modal-dialog bootstrap-modal jhipster

我目前正在 jhipster 的帮助下开发一个网络应用程序,它使用 bootstrap 和 Angular js。

当我创建一个实体(例如:部门)时,它会为我生成 CRUD 操作。

当我尝试创建一个部门时,它会向我显示一个弹出窗口,他们称之为MODAL

但我希望将其放在单独的页面中,而不是作为弹出窗口。

如何将其从模态文件更改为 html 文件? enter image description here

我的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');
            }),
                  })

最佳答案

就像任何其他非弹出页面一样,您已经找到了您需要的内容,但进行了一些微小的修改和更正,例如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
                        };
                }
            })

关于javascript - 如何用html页面替换模态对话框?我需要重定向到 html 页面而不使用模式对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38594164/

相关文章:

javascript - 如果跨度内有文本,为什么 Angular Material 模式对话框会展开?

javascript - 重新绑定(bind) JQuery 事件

angularjs - Angular 指令协作

javascript - ng-click 没有触发工厂类

javascript - Angular ngModelOptions allowInvalid无法正常工作

ember.js - 如何在 ember 中为多个弹出窗口重用模态模板?

每次打开模态时,模态中的 JavaScript 都会重复

javascript - Qualtrics "Pick, Group, and Rank"分组框高度

javascript - Springs CSRF 保护*仅* HTML 登录页面

javascript - Angular JS 中的 DOM 查询; $ (".myclass").each() 替代