oly-dialog

    1.0.20 • Public • Published

    Angular wrapper for <dialog> elements

    Lets you use and control <dialog> elements from your Angular code.

    <dialog> provides a browser native way to show both modal and non-modal dialogs, which may optionally return a value. <dialog> is a part of the HTML5.1 spec. For more information on the <dialog> element, see this blog post by treehouse.

    If you need to support browsers that haven't yet implemented <dialog>, consider using Google's excellent dialog polyfill. This directive will detect that the polyfill is installed and automatically register <dialog> elements for you.

    Installation

    npm install --save oly-dialog

    Once you have installed oly-dialog, include it in your project however you like, e.g. with browserify or by including dist/oly-dialog.js on your page.

    Then, add oly-dialog to the dependencies of your angular module.

    Node/Browserify

    var olyDialog = require('oly-dialog');
     
    angular.module('yourApp', [olyDialog]);

    Others

    angular.module('yourApp', ['oly.dialog']);

    Usage

    Dialog

    You can use an oly-dialog just like you would use a regular dialog.

    <dialog>
        <!-- your content here -->
    </dialog>

    Content is transcluded and has access to the scope which the dialog is created in.

    You can access the controller for the dialog from angular code by requireing it from a child directive like so:

    module.directive('yourDirective', function() {
        return {
            require: '^dialog',
            link: function(scope, element, attrs, dialogCtrl) {
                // your directive
            }
        };
    });

    Alternatively, you can provide a name for your dialog. You can then use this name to get a reference to the dialog controller from the DialogRegistry.

    <dialog name="dialog name">
        <!-- your content here -->
    </dialog>
    module.service('YourService', ['DialogRegistry', function(dialogRegistry) {
        var dialogCtrl = dialogRegistry.getDialog('dialog name');
    }]);

    The name can be a regular attribute or an Angular expression.

    Showing the Dialog

    From Code

    If you have access to the dialog controller, you can use it to show the dialog. The show() method returns a promise which will resolve with the return value set when the dialog is closed. If no return value is provided, the promise will reject.

    dialogCtrl.show()
        .then(function(returnValue) {
            // do something with return value
        })
        .catch(function() {
            // do something if value not specified
        })
        .finally(function() {
            // always do something when the dialog is closed
        });

    The show method is defined as such: show([modal], [anchor])

    Argument Type Description
    modal (optional) (bool) default: true if true, the dialog will be modal (prevent interaction with other elements on the page).
    anchor (optional) Element or MouseEvent the anchor for the dialog (not currently implemented in browsers).

    From a Template

    Showing the dialog can also be achieved with the oly-dialog-show directive, which can be used either as an element or an attribute.

    <oly-dialog-show for="dialog name" modal="true" anchor=".anchor-selector"></oly-dialog-show>

    The modal and anchor attributes are optional. The anchor is given as a selector. If the selector matches multiple DOM elements, the first match is used as the anchor.

    Closing the Dialog

    From Code

    The dialog controller can also be used to close the dialog.

    dialogCtrl.close(returnValue);

    The returnValue is optional and is the value that is used to resolve the promise returned by the show() method. If no returnValue is specified then the promise is rejected.

    From a Template

    Closing the dialog can also be achieved using the oly-dialog-close directive, which can be used either as an element or an attribute. This directive must be used as a child of the <dialog> element.

    <oly-dialog-close return="expression"></oly-dialog-close>

    The return attribute is bound to the expression given and will be used as the returnValue for the close() method.

    Events

    $dialogShow

    Type: emit

    Target: dialog containing scope

    Arguments: dialog controller instance

    $dialogClose

    Type: emit

    Target: dialog containing scope

    Arguments: dialog controller instance

    Install

    npm i oly-dialog

    DownloadsWeekly Downloads

    70

    Version

    1.0.20

    License

    MIT

    Last publish

    Collaborators

    • andrewh
    • olympic