# angular-bootstrap-modal

> TMJ default modal approach on angular bootstrap.

Latest version **1.0.8** (published 2017-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-bootstrap-modal
pnpm add angular-bootstrap-modal
yarn add angular-bootstrap-modal
bun add angular-bootstrap-modal
```

## 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 | 2017-08-11 |
| First published | 2016-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+12 in 2 direct dependencies) |
| Install scripts | no |
| Author | TMJ Engineering, Rej Mediodia |
| Maintainers | rejtg21, tmjp-engineering |
| Keywords | show-modal, default-modal, tmj-modal, tmj-show-modal, tmj, modal, bootstrap-modal |

## Links

- npm: https://www.npmjs.com/package/angular-bootstrap-modal
- Repository: https://github.com/TMJPEngineering/angular-bootstrap-modal
- Homepage: https://github.com/TMJPEngineering/angular-bootstrap-modal#readme
- Issues: https://github.com/TMJPEngineering/angular-bootstrap-modal/issues
- npm.io page: https://npm.io/package/angular-bootstrap-modal

## Dependencies (4)

- [angular](https://npm.io/package/angular.md) ^1.5.8
- [bootstrap](https://npm.io/package/bootstrap.md) ^3.3.7
- [angular-resource](https://npm.io/package/angular-resource.md) ^1.5.8
- [angular-ui-bootstrap](https://npm.io/package/angular-ui-bootstrap.md) ^2.2.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2017-08-11
- 1.0.7 — 2017-07-12
- 1.0.6 — 2017-07-12
- 1.0.5 — 2017-07-03
- 1.0.4 — 2016-12-21
- 1.0.3 — 2016-10-18

## README

# ANGULAR-BOOTSRAP-MODAL

A default approach of using the [angular-ui-bootstrap](https://github.com/angular-ui/bootstrap) modal adding common methods use with support to http request use by [angular](https://github.com/angular/angular.js)
and [angular-resource](https://github.com/angular/bower-angular-resource).

# Installation

You can clone or download this, or if you have a Node install you can just:

    npm install angular-bootstrap-modal

# Usage

You can still use reserved options by [angular-bootstrap](https://angular-ui.github.io/bootstrap/#/modal) while using this library.

## Adding dependency to your project

Be sure to add the module dependency of this library `tmjModal`.

    angular.module('myModule', ['tmjModal']);

## Service

You should inject the `Modal` service for you to use the feature of this library.

    Controller.$inject = ['Modal'];

    function Controller(Modal) {

    }

## Default

When using the modal you can pass any options you want to pass and will be receive your specified template. Take note `templateUrl` is a native of angular bootstrap w/c request your template you want to use.

    var attr = {
        templateUrl: 'templates/index.html',
        title: 'This is a title',
        first_name: 'Rej',
        last_name: 'Mediodia'
    };

    var modal = Modal.open(attr);

By default controller alias is `dmic` you still can override this by passing `controllerAs` in options. So when calling it in your modal template it is expected to be like this.

      <div class="modal-header">
        <h3 class="modal-title">{{ dmic.title }}</h3>
      </div>
      <div class="modal-body">
        <h2>Modal Body</h2>
        <div class ="form-group">
          <div class = "row">
            <label class = "col-md-4">First Name</label>
            <label class = "col-md-8" ng-bind ="dmic.first_name"></label>
          </div>
        </div>
        <div class ="form-group">
          <div class = "row">
            <label class = "col-md-4">Last Name</label>
            <label class = "col-md-8" ng-bind ="dmic.last_name"></label>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" type="button" ng-click="dmic.close()">Close</button>
      </div>

Notice that we use `dmic.close()` above. By default we created default functions to be used:
- `close()` - this will trigger the closing of modal, if `keepOpen` is enabled return of result will be triggered by this function(this will discuss later on).
- `save` - this will automatically request based on ur specified url or given resource.
- `saveWithFile` - this will convert your data to FormData w/c handles a file.

## Saving

When saving you should include `dmic.save()` in your triggers what you specified in `input` will be automatically submitted

      <button class="btn btn-primary" type="button" ng-click="dmic.save()">Save</button>

### $HTTP Request
When using this the default request will always be a `POST` method.

    var attr = {
                templateUrl: 'templates/form.html', // the template to be generated
                title : 'Form Modal',
                url : 'server/sample.php', // url to be save should accept post method
                input : {
                    first_name : 'Rej',
                    last_name : 'Mediodia'
                }
            }

    var modal = Modal.open(attr);

    modal.then(function (result) {
        // when saved or close if keepOpen
        console.log('returned data',result);
    }, function () {
        // when closed
    });

### Angular Resource Request

    var attr = {
          templateUrl: 'templates/form.html',
          title : 'Form Resource Modal',
          resource : {
              service : 'App', // the name of the service
              action : 'save' // the function to be called
          },
          input : {
              first_name : 'Rej',
              last_name : 'Mediodia'
          }
      }

      var modal = Modal.open(attr);

      modal.then(function (result) {
          // when saved or close if keepOpen
          console.log('returned data',result);
      }, function () {
          // when closed
      });

The above resource will be called like this `App.save(input).$promise.then(function(result){});` having this service.

    angular.module('app')
        .factory('App', App);

    App.$inject = ['$resource'];

    function App($resource) {
        return $resource('server/sample.php');
    }

## Saving with File

When saving/uploading a file you should use `dmic.saveWithFile()` to automatically translate the `input` option to `FormData`.

    <button class="btn btn-primary" type="button" ng-click="dmic.save()">Save</button>

If you are using a resource when uploading a file you should specify the headers in your service. When you're using $http this library already do it for you.

## Keeping the modal open

By default the modals are automatically close on save if you want to retain the state of the modal you should set `keepOpen` option to true. When `keepOpen` is set to true the returned result from ajax will be received after you closed the modal.

    var modal = Modal.open(attr);

    modal.then(function (result) {
        // when saved or close if keepOpen
        console.log('returned data',result);
    }, function () {
        // when closed
    });

## Adding a new function

Sometimes there is an instance that your modal have other buttons and you want to add a function to them. Luckily since this library accept any options to be used in your template, you can just add another option to assign the function.

    var attr = {
        templateUrl: 'templates/other-form.html',
        title : 'Form Modal Other Functions',
        url : 'server/sample.php',
        input : {
            first_name : 'Rej',
            last_name : 'Mediodia',
        },
        otherFunc : otherFunc
    }

    var modal = Modal.open(attr);

    modal.then(function (result) {
        // when saved or close if keepOpen
        console.log('returned data',result);
    }, function () {
        // when closed
    });

    function otherFunc() {
      console.log('other function');
    }

you can call the other function in your template by;

    <button class="btn btn-danger" type="button" ng-click="dmic.otherFunc()">Other Func</button>

if you want to get the modal instance you can inject it through the function by:

    <button class="btn btn-danger" type="button" ng-click="dmic.otherFunc(dmic.$uibModalInstance)">Other Func</button>

# Supported browsers

[Supported Browsers](https://github.com/angular-ui/bootstrap#user-content-supported-browsers#user-content-supported-browsers)

# TODO
- Test Scripts

# Credits
- TMJP Engineering

# License

[MIT](https://github.com/TMJPEngineering/bootstrap-modal/blob/master/LICENSE.md)

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