CODEWITHSUNDEEP
angularjstwitter-bootstrapangularjs-directivepopupangular-ui
Fooker
Fooker

Reputation: 796

How to show popup in AngularJS app using bootstrap

I need to show 4-5 popup in a view. As of now i am using bootstrap to show the popup. But my problem is that my html page became heavy, there is page's own content and 5 popup's content. I want to move each popup's content in different html page. Please suggest.

Thanks in advance.

Upvotes: 0

Views: 2054

Answers (3)

SM Adnan
SM Adnan

Reputation: 565

ng-include="" is good if you use one dialog with multiple pages or tabs. Changing only the html name works fine and make it simple. For example:

HTML

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

Controller

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

However, for your current scenario, I would recommend Barnabas Kendall's way. I can share what I have used. I created a single service for a group of modals.

Angular Module

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

Service (for group of 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
        });
    };
});

Usages

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

Upvotes: 0

Barnabas Kendall
Barnabas Kendall

Reputation: 4317

I assume by "popup" you mean modal window. I agree with Aditya above, using the angular-ui modal service is very good. However, unlike the suggestion to use ng-include, I recommend using the modal's built-in "templateUrl" to keep the markup in a separate file. I have used this in my projects and it works well.

Upvotes: 1

Aditya Sethi
Aditya Sethi

Reputation: 10586

You can use angular ui modal windows

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

for seperating the templates, in the script you can use <div data-ng-include="'/templte/modal.html'"></div>

Upvotes: 0

Related Questions