#angular.modal It's a very simple provider+directive to help you realize beautiful popups just like you always dreamed about.

Besides angularjs, this modal has NO dependencies. No jQuery or bootstrap. You take it and customize it.

##What it does It gives you the tools to create custom ready to use modals in AngularJs. Basically you can declare your modals wherever you want in your code and just include them and let angular.modal do the rest.

##How it works It introduces the modalize attribute directive which is used to initialize a default popup container, like this:

<div modalize="mypopups.firstpopup">
   ...
</div>  

Pass in an ID which the system will use to identify your popup when you'd want to open it.

Angular.modal also introduces an element directive modalize which is... let's call it a partial of your default popup structure. I gave the directive a default popup structure which you can override if you want (and easily change template from time to time). It's used like this:

<div modalize="mypopups.firstpopup">
    <modalize window-class="small_size" content-class="custom-class">
        <a href="#" ng-click="$modal.open('whatever.second')">
            Start
        </a>
    </modalize>
</div>  

As per configuration in the example:

angular.module("modalExample", ['angular.modal']);
//
angular.module("modalExample").config(['$modalProvider', function($modalProvider){
    $modalProvider.configSet('dom_class', 'back_overlay');
    $modalProvider.configSet('dom_active_class', 'enter');
    
    // It adds the $modal variable in the rootscope
    $modalProvider.configSet('inject_into_html', true);
//
}]);

This is the basic you'll have to know to get started. Read further to learn more.

##Getting dirty - Api reference ###<modalize> attributes: A partial of the default modal structure. It'll help you go faster!

windowClass:	Adds a class to window container of the default structure [default=window]
contentClass:	Adds a class to the content container of the default structure [default=content]
closable:		Is the modal closable by the user? [default=true]
centered:		Centers the modal at the center of the screen, vertically and horizontally [default=true]

###modalize (attribute): It has no particular attributes than itself, the modal id.

###modalize-d (attribute): The feature is explained below, let's look at the attributes that it accepts.

src: Tells the modal where is the content of it. [default=none]

##Features ###modalize-d This feature is the coolest of the package. Instead of writing the code of every popup's content right into a single page, and increase your page load, you can use the modalize-d attribute directive to make your popup's content load in async! That's right, you do that by simply using modalize-d instead of modalize. Just like this:

<div modalize-d="popupid" src="the_path_to_your_html_file">
<!-- It'll do the rest -->
</div> 

You can write your code into your partial as you've been doing before:

<modalize window-class="small_size" content-class="custom-class">
     <a href="#" ng-click="$modal.open('whatever.second')">
          Start
     </a>
</modalize>

A common problem is that you'll want to get some parent scope variable inside this dynamic modal. No worries just use binding. Let's have a look at a great example by @andreapaciolla:

<div ng-controller="SampleCtrl">
    <div modalize-d="blog.post.read.more" src="/templates/poppy"></div>
</div>

and the content of /templates/poppy is the following:

<modalize window-class="smaller_large_size" content-class="news_card" centered="false" closable="true">
    <ul>
        <li ng-repeat="test in binding.tests">
            {{$index}}
        </li>
    </ul>
</modalize>

and finally our SampleCtrl is this ( that's coffeescript ):

module = angular.module('sampleModule', ['modal'])
module.controller("SampleCtrl", ["$scope", "$modal",
    ($scope, $modal)->
        $scope.tests = [0,1,2]

])

Keep attention to this line <li ng-repeat="test in binding.tests"> by writing binding we can access to modalize's parent scope so we will find the three elements in the array named tests.

##Things that will come These are the things I will add to this module:

• [DONE]Dynamic popups. You will setup popups into the config phase and then the app will load the automatically when it needs them (and store them into the cache)
• Navigation controller and history. They are pretty the same thing. You got the point. You will be able to do $modal.back() and .forward()
• Events. They will allow you to perform specific actions in any specific moment in a popup's lifecycle.
• [DONE]Themes and layouts. You will want to customize the html generated by the modalize tag. The app will allow you to set custom templates (you will be able to switch from one to another at any time)
• Improve the way the popup is stored. (Now using IDs, use variable references instead)

##Changelog

25 June 2014

Fixed scope inheritance when using modalize-d directive

Fixed injection of modalize-d inside the DOM.

16 May 2014

First release