ng modal

by willtx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-sanitize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"><script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>

<div ng-app='main' ng-controller="DMPEController as dmpe">
    <script type="text/ng-template" id="login.html">
       <div class="modal fade ng-isolate-scope in" tabindex="-1"  ng-class="{in: animate}" ng-style="{'z-index': 998 + index*10, display: 'block'}" ng-click="cancel($event)">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header ng-scope">
                                <h3 class="modal-title">Validate your DMPE log-in credentials</h3>
                            </div>
                            <div class="modal-body">
                                <label for="dmpeUserId" class="sr-only">User Id</label>
                                <input type="text" id="dmpeUserId" ng-model="credCheck.username" class="form-control"  placeholder="User Id" required="" autofocus="">
                                <label for="dmpePassword" class="sr-only">Password</label>
                                <input type="password" id="dmpePassword" ng-model="credCheck.password" class="form-control" placeholder="Password" required="">
                            </div>
                            <div class="modal-footer">
                                <button...

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

JavaScript

var appRoot = angular.module('main', ['ui.bootstrap', 'ngRoute', 'ngResource', 'ngAnimate', 'ngSanitize','angularStart.services']);

var angularStartServices = angular.module('angularStart.services', ['ngResource']);  

angularStartServices
    .factory('ModalService', ['$document', '$compile', '$controller', '$http', '$rootScope', '$q', '$templateCache',
        function($document, $compile, $controller, $http, $rootScope, $q, $templateCache) {

            //  Get the body of the document, we'll add the modal to this.
            var body = $document.find('body');

            function ModalService() {

                var self = this;

                //  Returns a promise which gets the template, either
                //  from the template parameter or via a request to the
                //  template url parameter.
                var getTemplate = function(template, templateUrl) {
                    var deferred = $q.defer();
                    if(template) {
                        deferred.resolve(template);
                    } else if(templateUrl) {
                        // check to see if the template has already been loaded
                        var cachedTemplate = $templateCache.get(templateUrl);
                        if(cachedTemplate !== undefined) {
                            deferred.resolve(cachedTemplate);
                        }
                        // if not, let's grab the template for the first time
                        else {
                            $http({method: 'GET', url: templateUrl, cache: true})
                                .then(function(result) {
                                    // save template into the cache and return the template
                                    $templateCache.put(templateUrl, result.data);
                                    deferred.resolve(result.data);
                                }, function(error) {
                                    deferred.reject(error);
          ...