Modals in Angular: WorkInProgress/Idea

bootstrap-helpers.js

'use strict';
/*
Browserify Example:
var bsHelp = require('./bootstrap-helpers');
bsHelp.modal({
  content: [element|html],
  title: 'Hello World',
  success: [fn],
  cancel: [fn]
})
*/
exports.popup = exports.modal = function _makeModal(opts) {
  var popup = angular.element('<div id="' + (opts.id ? opts.id : 'modal-helper') + '" class="modal modal-helper fade">\n' +
  ' <div class="modal-dialog">\n' +
  '   <div class="modal-content">\n' +
  '     <div class="modal-header">\n' +
  '       <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>\n' +
  '       <h4 class="modal-title">' + opts.title + '</h4>\n' +
  '     </div>\n' +
  '     <div class="modal-body">\n\n\n</div>\n' +
  '     <div class="modal-footer">\n' +
  '       <button type="button" class="btn btn-default cancel" data-dismiss="modal">Close</button>\n' +
  '       <button type="button" class="btn btn-primary success" data-dismiss="modal">Ok</button>\n' +
  '     </div>\n' +
  '   </div>\n' +
  ' </div>\n' +
  '</div>\n')

  if ( ! opts.cancel ) {
    popup.find('.cancel').on('click', opts.cancel || _.noop);

  } else if (!opts.buttons || opts.buttons === 1) {
    popup.find('.btn.cancel').remove();
  }
  popup.find('.success').on('click', opts.success || _.noop);
  if ( !opts.title ) {
    popup.find('.modal-header').remove();
  }
  if ( !opts.successLabel ) {
    popup.find('.btn.success').html(opts.successLabel);
  }
  opts.content = opts.content || opts.message;
  if ( typeof(opts.content) === 'string' ) {
    popup.find('.modal-body').html(opts.content);
  } else if (opts.content) {
    popup.find('.modal-body').append(opts.content);
  } else {
    throw Error('Modal popup needs content to show!');
  }
  document.querySelector('body').appendChild(popup);
  return popup;
}