处理模态内部的ui-view

时间:2016-06-17 19:14:45

标签: javascript angularjs uiview bootstrap-modal

我有一个模态窗口,我想在其中为标签创建不同的子视图。由于它是模态,因此它没有URL。如何处理每个选项卡的模态内的ui-views。我需要有配置文件吗? 理想的结构:

div.modal-header
    h4.modal-title
        i.icon.icon-bell-outline
        | {{ config.title }}

div.modal-body(ng-if="vm.loading === 0")
    uib-tabset(active="active")
        uib-tab(index="0")
            tab-heading
                a.tab-head(ng-model="vm.selectedIncidentState", translate)
                    | Select an existing incident
            ui-view("sub-view")
        uib-tab(index="1")
            tab-heading
                tab-head
                    a.tab-head(ng-model="vm.selectedIncidentState", translate)
                        | Create a new incident
           ui-view(" ");

模态实例控制器:

function EscalateAlertModalInstanceController ($scope, logger, $uibModalInstance, modalConfig, alertsInfo) {
        logger.info("EscalateAlertModalInstanceController activated");
        $scope.modalConfig = modalConfig;
        $scope.alertsInfo = alertsInfo;
        /**
        * Called when the alert(s) are saved
        */
        $scope.onSave = function (error) {
            $uibModalInstance.close(error);
        };
        /**
        * Called when dialog is dismissed by clicking on cancel
        */
        $scope.onCancel = function () {
            $uibModalInstance.dismiss("cancel");
        };
    }

模态配置:

vm.escalate = function () {
            var modalInstance;
            modalInstance = $uibModal.open({
                animation: true,
                backdrop: "static", // disables modal closing by click on the backdrop
                template: "<escalate-to-incident config=\"modalConfig\" alerts=\"alertsInfo\" on-save=\"onSave(error)\" on-cancel=\"onCancel()\"></escalate-to-incident>", // jscs:ignore maximumLineLength
                controller: "EscalateAlertModalInstanceController",
                size: "lg",
                resolve: {
                    /**
                     * modal config title
                     */
                    modalConfig: function () {
                        return {
                            title: gettextCatalog.getPlural(vm.selectedAlertsCount, "Escalate {{ count }} alert to an incident", "Escalate {{ count }} alerts to an incident", {count: vm.selectedAlertsCount}) // jscs:ignore maximumLineLength
                        };
                    },
                }
            });

我是否需要在模态配置中添加状态?如果是,我可以不给URL吗? 请帮忙

0 个答案:

没有答案