angular-bootstrap-modal

ANGULAR-BOOTSRAP-MODAL

A default approach of using the angular-ui-bootstrap modal adding common methods use with support to http request use by angular and 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 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

TODO

• Test Scripts

Credits

• TMJP Engineering

License

MIT