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

Question

我需要在视野中显示4-5弹出。到目前为止，我正在使用引导来显示弹出窗口。但我的问题是，我的html页面变得沉重，有页面自己的内容和5弹出的内容。我想在不同的html页面中移动每个弹出窗口的内容。请建议一下。

提前谢谢。

Answer 1

我猜“弹出”你是指模态窗口。我同意上面的说法，使用角-ui模式服务非常好。但是，与使用ng-include的建议不同，我建议使用模式的内置"templateUrl“将标记保存在一个单独的文件中。我在我的项目中使用了这个，而且效果很好。

Answer 2

您可以使用角度用户界面模式窗口。

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

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

Answer 3

ng-如果您使用一个带有多个页面或选项卡的对话框，则包含=“”是很好的。只更改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']);

服务(用于modals组)

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