如何使用引导程序在 AngularJS 应用程序中显示弹出窗口答案

【问题标题】：How to show popup in AngularJS app using bootstrap如何使用引导程序在 AngularJS 应用程序中显示弹出窗口
【发布时间】：2014-11-17 19:11:55
【问题描述】：

我需要在视图中显示 4-5 弹出窗口。截至目前，我正在使用引导程序来显示弹出窗口。但我的问题是我的html页面变得很重，有页面自己的内容和5个弹出内容。我想将每个弹出窗口的内容移动到不同的 html 页面中。请提出建议。

提前致谢。

【问题讨论】：

标签： angularjs twitter-bootstrap angularjs-directive popup angular-ui

【解决方案1】：

我假设“弹出”是指模态窗口。我同意上面的 Aditya，using the angular-ui modal service 非常好。但是，与使用 ng-include 的建议不同，我建议使用模态的内置“templateUrl”将标记保存在单独的文件中。我在我的项目中使用过它，效果很好。

【讨论】：

谢谢巴纳巴斯，我也采用了同样的方法，它奏效了。谢谢:)

【解决方案2】：

您可以使用角度 ui 模态窗口

http://angular-ui.github.io/bootstrap/

为了分离模板，在脚本中你可以使用<div data-ng-include="'/templte/modal.html'"></div>

【讨论】：

【解决方案3】：

ng-include="" 如果您使用具有多个页面或选项卡的对话框，则非常有用。仅更改 html 名称可以正常工作并使其简单。例如：

HTML

<div ng-include="getCurrentPage()"></div>

控制器

scope.getCurrentPage = function(){
    return "path/to/html" + scope.pageId + ".html";
};

但是，对于您当前的情况，我会推荐 Barnabas Kendall 的方式。我可以分享我用过的东西。我为一组模式创建了一个服务。

角度模块

var app = angular.module('app', ['ui.bootstrap']);

服务（用于模态组）

app.service('ModalDialogs', function ($modal) {
    return {
        modalDialog1: modalDialog1,
        modalDialog2: modalDialog2
    };

    var modalDialog1 = function (size, param1, param2) {
        var ControllerForDialog1 = function (scope, modalInstance, param1, param2) {
            scope.cancel = function () {
                modalInstance.dismiss('cancel');
            };

            // todo
        };

        return $modal.open({
            templateUrl: 'path/to/dialog1.html',
            size: size,
            resolve: {
                param1: function () {
                    return param1 + param2;
                },
                param2: function () {
                    return "this can be any value";
                }
            },
            controller: ControllerForDialog1
        });
    };

    var modalDialog2 = function (size, param1) {
        var ControllerForDialog2 = function (scope, modalInstance, anotherParam) {
            scope.cancel = function () {
                modalInstance.dismiss('cancel');
            };

            // todo
        };

        return $modal.open({
            templateUrl: 'path/to/dialog2.html',
            size: size,
            resolve: {
                anotherParam: function () {
                    return "this can be any value" + param1;
                }
            },
            controller: ControllerForDialog2
        });
    };
});

用法

app.controller('MainController', function($scope, ModalDialogs){
    ModalDialogs.modalDialog2('lg', 'YourName');
});

【讨论】：