Angular Modal Dialogs

two controllers share data via a service

by Ben Clayton

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-animate.js"></script>
<div ng-app="Demo">
    <div id='mybody' ng-controller="AppController">
         <h1>
        Creating A Simple Modal System In AngularJS
    </h1>

        <ul>
            <li> <button ng-click="alertSomething()">Alert something</button>

            </li>
            <li> <button ng-click="confirmSomething()">Confirm something</button>

            </li>
            <li> <button ng-click="promptSomething()">Prompt something</button>

            </li>
        </ul>
        <br/>Width:<input ng-model="width" /><br/>
        <div class="box" style="width:{{width}}px">{{width}} x 50</div>
        <!-- BEGIN: Modals Layout. -- Our simple modal system makes the assumption that only one modal window can be open at a time. I find this to be a very reasonable assumption for 99% of use- cases. And, I'd rather keep it simple and work around the rare use-case in some other fashion (such as a multi-state modal). To remove any "magic", I'm explicitly presenting the control properties rather than trying to hide them behind a compile() step. Notice that rendering a modal is JUST LIKE RENDERING ANY OTHER VIEW - we have a subview variable which we are using to swap modals, or remove modals altogether. The big take-away in the following code is that modal windows aren't a *special* concept. They are views or components that work the same exact way that the rest of your application works! Sure, there are a few more rules, like only one open at a time; but, other than that, there's nothing here that's any different than any other view you will build. It has a Controller, it has a View, and it works with other services to execute its functionality. -->
        <div bn-modals ng-show="subview" class="m-modals" ng-switch="subview">
            <!-- BEGIN: Alert Modal. -->
            <div...

CSS

.m-modals {
    position:fixed;
    border:1px solid green;
    border-radius:10px;
    padding:10px;
    background-color:#C0C0C0;
    right:10px;
}
.box {
    margin:20px;
    border:1px solid red;
    height:50px;
}

JavaScript

// Create an application module for our demo.
        var app = angular.module("Demo", ["ngAnimate"]);
        // -------------------------------------------------- //
        // -------------------------------------------------- //
        // I control the root of the application.
        app.controller(
            "AppController",

        function ($scope, modals) {
            // I open an Alert-type modal.
            $scope.width=100;
            $scope.alertSomething = function () {
                // The .open() method returns a promise that will be either
                // resolved or rejected when the modal window is closed.
                var promise = modals.open(
                    "alert", {
                    message: "I think you are kind of beautiful!"
                });
                promise.then(

                function handleResolve(response) {
                    console.log("Alert resolved.");
                },

                function handleReject(error) {
                    console.warn("Alert rejected!");
                });
            };
            // I open a Confirm-type modal.
            $scope.confirmSomething = function () {
                // The .open() method returns a promise that will be either
                // resolved or rejected when the modal window is closed.
                var promise = modals.open(
                    "confirm", {
                    message: "Are you sure you want to taste that?!"
                });
                promise.then(

                function handleResolve(response) {
                    console.log("Confirm resolved.");
                },

                function handleReject(error) {
                    console.warn("Confirm rejected!");
                });
            };
            // I open a Prompt-type modal.
            $scope.promptSomething = function () {
                // The .open() method returns a promise that will be either
                // resolved or...