# ng-mobile-dialog

> A simple modal directive for Angular.js that uses promises, resolves and separated html templates

Latest version **1.0.8** (published 2016-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-mobile-dialog
pnpm add ng-mobile-dialog
yarn add ng-mobile-dialog
bun add ng-mobile-dialog
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2016-05-19 |
| First published | 2016-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Leonardo Salles |
| Maintainers | leonardosalles |
| Keywords | ngMobileDialog, angular, dialog, ngDialog, mobiledialog, mobileangular, angularmobile |

## Links

- npm: https://www.npmjs.com/package/ng-mobile-dialog
- Repository: https://github.com/leonardosalles/ngMobileDialog
- Homepage: https://github.com/leonardosalles/ngMobileDialog#readme
- Issues: https://github.com/leonardosalles/ngMobileDialog/issues
- npm.io page: https://npm.io/package/ng-mobile-dialog

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.8 (latest) — 2016-05-19
- 1.0.7 — 2016-05-18
- 1.0.6 — 2016-05-18
- 1.0.5 — 2016-02-17
- 1.0.4 — 2016-02-17
- 1.0.3 — 2016-02-17
- 1.0.2 — 2016-01-14
- 1.0.1 — 2016-01-12

## README

# ngMobileDialog
A responsive dialog projected as mobile-first, in mobile use fullscreen like iOS modals, and 768+ screens use centralized dialogs

Demo

   [http://plnkr.co/dz3vZyrgBi6jSjbjmIqi](https://plnkr.co/dz3vZyrgBi6jSjbjmIqi/)



Install

    npm install ng-mobile-dialog
    
Or

    bower install ngMobileDialog
    
Include minified version
```html
	<script src="bower_components/ngMobileDialog/dialog.js"></script>
```

To debug include max version
```html
	<script src="bower_components/ngMobileDialog/dialog.max.js"></script>
``` 
Use
```javascript
    angular.module("app", ["ngMobileDialog"], function ($dialogProvider) {
    	//Default is false
    	$dialogProvider.multiple = true;
    });
```
Markup
```html
    <button ng-click="openDialog()">Open Dialog</button>
```
Javascript

main-controller.js
```javascript
    
angular.module("app").controller("MainController", function ($scope, $dialog) {
    $scope.openDialog = function() {
        var resolverOne = function () {
            return "MainController"
        };
        $dialog.create({templateUrl: "dialog.html", controller: "DialogController", resolve: {resolveOne: resolverOne}}, function (dialog) {
            dialog.open().then(function (someValue) {
                //Will show: This can be whatever from dialog like an object or string
                alert(someValue);
            });
        });
    };
    
     $scope.openDialogTwo = function() {
        var resolverOne = function () {
            return "MainController"
        };
        
        var template = '<div role="dialog" tabindex="-1" class="dialog" aria-labelledby="dialog-title">'+
                        '  <div role="document" class="modal-dialog">'+
                        '     <div class="modal-content">'+
                        '<div class="modal-header">'+
                        '<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                        '  <h1 id="dialog-title">this is a dialog from {{parent}}<!-- MainController will be show--></h1>'+
                        '</div>'+
                        '<div class="modal-body">'+
                        '  Modal Body'+
                        '</div>'+
                        '<div class="modal-footer">'+
                        '<button ng-click="close()">Close Dialog</button><br><br>'+
                        '<strong>Without parameters can resolve and close directly</strong>'+
                        '<button ng-click="resolve()">Close Dialog without parameters</button>'+
                        '</div>'+
                        '</div>'+
                        '</div>'+
                      '</div>';
        
        $dialog.create({template: template, controller: "DialogController", resolve: {resolveOne: resolverOne}}, function (dialog) {
            dialog.open().then(function (someValue) {
                //Will show: This can be whatever from dialog like an object or string
                alert(someValue);
            });
        });
    };
});
```
dialog-controller.js
```javascript
	angular.module("app").controller("DialogController", function ($scope, resolveOne) {
		$scope.parent = resolveOne;//MainController
		
		$scope.close = function () {
			$scope.resolve("This can be whatever from dialog like an object or string");
		};
	});
```

dialog.html
```html
<div role="dialog" tabindex="-1" class="dialog" aria-labelledby="dialog-title">
    <div role="document" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h1 id="dialog-title">this is a dialog from {{parent}}<!-- MainController will be show--></h1>
          </div>

          <div class="modal-body">
            Modal Body
          </div>

          <div class="modal-footer">
            <button ng-click="close()">Close Dialog</button><br><br>
            <strong>Without parameters can resolve and close directly</strong>
            <button ng-click="resolve()">Close Dialog without parameters</button>
          </div>
        </div>
    </div>
</div>
```
Options

| Name      | Type   | Example                                                | Required            | Description                                                              |
|-------------|--------|--------------------------------------------------------|---------------------|--------------------------------------------------------------------------|
| controller     | String | "DialogController" | true               | The name of defined controller for dialog |
| controllerAs     | String | "vm" | false               | A abbreviation to controller name such as vm, it allows you to use vm.property at your view |
| scope     | Object | {parameter: 'myParameter'} | false               | A scope to be used in template |
| template    | String | "defined template string(from [Require.js Text](https://github.com/requirejs/text) for example)"                                      | If not template url | Template string                                                          |
| templateUrl | String | "src/app/dialog.html"                                  | If not template     | Template url for load                                                    |
| resolve     | Object | resolve: {resolveOne: function () { return "example"}} | false               | A object with keys of functions with values that will be passed to dialog controller |
| escKey     | Boolean | true(Default: false) | false               | A boolean that defines if modal will close with ESC press |

---
_Source: https://npm.io/package/ng-mobile-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._