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.

How To Use:

Include the createDialog.js file in your index.html file.
Include the 'fundoo.services' as a module dependency when you define your app.
Import the createDialog Service in your App Controller.
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],

								      controller: [modal_controller], 

								      backdropClass: [modal_backdrop_class], 

								      footerTemplate: [modal_footer_template], 

								      modalClass: [modal_class] 

								}, {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_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.

Why is it a Service and not a Directive?

A service can be called from inside any function or any onClick event. This helps to load the modal only when needed.
Directives need to be declared on the DOM and have to be manipulated by ng-show/ng-hide to change their display DOM manipulations.
Consider a modal that needs some data to be passed in (say to be displayed in the popup). Supporting arbitrary tags in the directive is slightly hard. Sending the data as a key:value combo in another containing object is not nice either, as that means the data will have to be on the scope. With a service, we now have a third and better option of just passing in what we want and not exposing it unnecessarily to the scope.

For Further Queries Contact:

Fundoo Solutions at contact@befundoo.com

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

AngularJS Modal Service

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.

How To Use:

Why is it a Service and not a Directive?

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.