fundoo-solutions/angularjs-modal-service

An AngularJS service that creates a Modal Popup with a given HTML template and controller

angularjs-modal-service

An AngularJS service that creates a Modal Popup with a given HTML template and controller.

The Service createDialog can be used to create a modal using Twitter's Bootstrap on the fly.

Requirements

1. Twitter Bootstrap CSS
2. the createDialog.js file

Using it:

Getting it via Bower

1. bower install angularjs-modal-service

Getting it otherwise

1. Download createDialog.js and include it as part of your library

Using it

1. Include the createDialog.js file in your index.html file.
2. Include the 'fundoo.services' as a module dependency when you define your app
3. Import the createDialog Service in your App Controller.
4. Call the createDialog() function from your controller, using the following syntax :

createDialog([template_url],{
    id : [modal_id],
    title: [modal_title],
    backdrop: [backdrop_visible],
    success: [modal_success_button],
    cancel: [modal_cancel_button],
    controller: [modal_controller],
    backdropClass: [modal_backdrop_class],
    footerTemplate: [modal_footer_template],
    modalClass: [modal_class],
    css: {
        [css properties key: value]
    }
}, {modal_custom_data});

where,

• template_url [string] : the url of the template of the body of the template.
• modal_id [string] : the unique html id attr of the template.
• modal_title [string] : is the title of the modal to be displayed in its header section.
• backdrop_visible(optional) [boolean]: whether to hide the html page behind the modal under an overlay
• modal_success_button(optional) [object]: the object add a submit button to the modal with its functionality

Syntax

    {label: '[label_of_button]', fn: '[function_on_click]'}

• modal_cancel_button(optional) [object]: the object add a cancel button to the modal with its functionality. For configuration options see modal_success_button
• modal_controller(optional) [string] : is the controller attached to the modal.
• modal_backdrop_class(optional) [string] : the css class for the backdrop of the modal.
• modal_footer_template(optional) [string] : the footer template of the modal.
• modal_class(optional) [string] : the css class for the modal.
• modal_custom_data(optional) [object] : is an object where each key becomes an argument to the controller of the modal.

Where can I see a demo?

Glad you asked. Go check out our GitHub page for the AngularJS-Modal-Service

Who are you?

We are Fundoo Solutions, an awesome company based out of India who just love AngularJS. Check out our website or our LinkedIn page.

License

The code above is open sourced, and licensed under the MIT License, which is the simplest and easiest to understand, and most open. Basically, feel free to use this code or modify it as per your needs. The actual license can be found in the LICENSE file.

angularjs-modal-service's Issues

Moving modal box is a nice feature.

Moving modal box is a nice feature , like what we see in google modal dialog boxes.

Optional success/cancel buttons

It would be cool if we could choose hide the success and/or cancel buttons. (I made a change in my local version to accommodate this for my own needs).

better to have BackdropClick as similar backdrop

In the createDialog.js , there is an inline click event added for backdrop element DIV. below is the code,
var backdropEl = angular.element('

');
backdropEl.addClass(options.backdropClass);
backdropEl.addClass('fade in');

Basically user's chance to click outside the modal, this cause close and loss of data.

To avoid/overcome - add "backdropclick" (either true/false) as similar as backdrop, based on the flag will add the ng-click event will add to that DIV element.
Otherwise add a custom callback function when open the modal.

This could be help to improve alot.

Thanks & Regards,
Hari

How can I call a method in the modal controller from the succes button?

Here is my code to display a dialog:

app.controller('MainCtrl', function ($scope, createDialog) {

    $scope.displayLoginDialog = function () {
        createDialog('views/login-dialog.html',{
            id : 'login_dialog',
            title: 'Sign in',
            backdrop: true,
            success: {label: 'Login'},
            controller: 'LoginCtrl'
        });
    }
});

From the success button I would like to call the login method on the controller:

app.controller('LoginCtrl', ['UserService', function ($scope, $rootScope, UserService) {

    $scope.login = function() {
        $rootScope.user = UserService.authenticate($scope.username, $scope.password);
    }
}]);

How can this be achieved?

How do you make this modal close only on close or submit event?

Thank you for sharing this wonderful module. It work nice for me but I need to know how to make it stay open when the user click outside the box or hit the escape key. I want it only to close of "close" or "submit" button click.

how can i send back the data from modal dialog to main controller? Please explain

latest bootstrap

I've tried using your code with the latest bootstrap .css but it doesnt seem to work.

License?

Under what license is your code available? :)

Would like option of passing template inline (template vs templateUrl)

It would be great to be able to pass in a template string as an option, many of my simple modal templates are nothing more than a line of text. Since the rest of the modal structure is already provided it would be nice to just pass in that line of text and not worry about creating/calling/caching another template. Are there any plans to add this?

Reopening a modal uses cache but not get request

Hi,
If page is not reloaded, When we first open the modal, it uses GET request to get data. Next time it is not using GET request.

I am using modal as a form. In form contents are displayed from server. Since, reopening modal doesn't send another request it is causing problem.

How can I make sure modal uses GET request every time I open it?

- Version bower

Hello,

Is there anyway we can add the current version to the bower file? We would like to lock into the current version instead of having to use latest.

Jose

Unable to inject the controller scope in the modal controller

below is my code and I when I am trying to inject he controllerscope it throws unknown provider error.

createDialog('app/blocks/lookup/lookup.html', {
id: 'BodCodes',
title: 'BodCodes',
backdrop: true,
controller: 'lookup',
backdropClass: "modal-backdrop",
footerTemplate: null,
modalClass: "modal",
css: {
top: '100px',
margin: '0 auto'
},
success: { label: 'select', fn: null },
resolve: {
controllerscope: function () {
return $scope;
}
}
});

console.log preventing IE users from showing the modal window

While testing on IE9 found that modal window is not getting showed up because of console.log statements in app.js. Due to IE bug, console object will get defined only after you open developer tool bar, once initialized it will start working in the same window session. So to make IE users happy, app.js should wrap console.log statement in "if(window.console)"

on modal loaded listener

How can I catch the onload event of a modal?

For example, I would like to focus a form element when the modal is shown on the screen.

Bootstrap 3 Support

Have you done any work on supporting Bootstrap 3? Figured I would ask before beginning a debug/fix session. If not, I may have some time to get it working and I can submit a pull request when done.

Memory leaks

I've made some tests on your demo page and appears that you have some memory leaks. Perhaps you should use a directive with the service instead of creating and destroying elements from the DOM.

To reproduce the same results just open and close the simple modal a few times while recording.

Timeline:

Heap snapshot profile comparison

How to use {modal_custom_data}

Please give an example

return a value from the modal

It would be nice if one can return a value selected in the dialog (in the success function for example).

Close with Callback

Is there a way I can close the modal with a JS Callback? I have the createDialog being used in a directive.

How to test createDialog in jasmine?

Hi,
I have used the createDialog service of fundoo solutions to show the pop up modal.I want to test the my delete functionality using jasmine.How to do that? please help.
Here is my code:
$scope.deleteProject = function (id) {

createDialog('/App/Modules/ReadAdmin/Projects/Templates/deleteproject.html', {

id: 'DeleteProjectDialog',

title: 'Delete Project',

backdrop: true,

controller: 'DetailCtrl',

success: { label: 'Proceed', fn: function () { projectService.delete({ id: id }); } },

cancel: { label: 'Cancel', fn: function () { console.log("Delete modal closed"); } }

},

{

id: id

});

};

//Details controller

projectApp.controller('DetailCtrl', function ($scope, projectService, id) {

$scope.project = projectService.get({ id: id });

});

//This is my test

it('should delete the project', function () {

$httpBackend.expectGET(api/projects).respond([{ id: 100, code: "B100", "name": "ABC"}]);

$httpBackend.expectDELETE(api/projects/100').respond({});

var ctrl = $controller('DetailCtrl', { $scope: $scope, projectService: mockprojectService,createDialog:dialogService });

$scope.deleteProject(100);
$httpBackend.flush();

expect(mockprojectService.delete).toHaveBeenCalled();

});

jQuery dependency

Hi, is jQuery actually necessary for this service?
I find that it is only used in this line: modalEl.css('top', $document.scrollTop() + 45);

I removed jQuery and left it this way modalEl.css('top', '45px'); and it works for me.

CWD not working in ST3

trying to use this in ST3. I don't think it is correctly detecting the CWD...packages don't seem to be installed anywhere. Even searching the whole system I cannot locate where the package is installed.