digitalbazaar/angular-stackables

Name: angular-stackables

Owner: Digital Bazaar, Inc.

Description: AngularJS stackable widgets (modals, popovers, menus) that use HTML5 dialog

Created: 2014-07-21 18:22:44.0

Updated: 2017-02-27 03:54:37.0

Pushed: 2017-08-15 20:28:18.0

Homepage: null

Size: 98

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

angular-stackables

AngularJS stackable widgets (modals, popovers, menus) that use HTML5 dialog

Examples

A simple modal

 ng-controller="TestController as test">
tackable-modal stackable="test.isOpen"
stackable-disable-escape="false"
stackable-closing="test.modalClosing(err, result)"
stackable-closed="test.modalClosed(err, result)">
<div class="stackable-dialog">
  <div inner-directive>
    <p>Test Dialog</p>
  </div>
</div>
stackable-modal>
v>

s
tion TestController() {
is.isOpen = false;

is.modalClosing = function(err, result) {
/* return false or a Promise that resolves to false to prevent close */
return true;


is.modalClosed = function(err, result) {
console.log('modal closed', err, result);



le.directive({
nerDirective: function() {
return {
  restrict: 'A',
  require: '^stackable',
  replace: true,
  transclude: true,
  template: '<div ng-transclude></div>',
  link: function(scope, element, attrs, ctrl) {
    // use stackable controller API to close stackable programmatically
    ctrl.close(null, 'closed from inner directive');
  }
};

A simple popover

 ng-controller="TestController as test">
utton
stackable-trigger="test.popoverState"
stackable-toggle="'active'">
<i class="caret"></i>
button>

tackable-popover stackable="test.popoverState"
stackable-placement="bottom"
stackable-alignment="center"
stackable-enable-escape="true">
<h3 class="stackable-popover-title">Title</h3>
<div class="stackable-popover-body">
  <p>Hello World</p>
</div>
stackable-popover>
v>

A simple menu

 ng-controller="TestController as test">
utton stackable-trigger="test.menuState">
<i class="caret"></i>
button>

tackable-popover stackable="test.menuState"
stackable-hide-arrow="true"
stackable-placement="bottom"
stackable-alignment="right"
stackable-enable-escape="true">
<ul class="stackable-menu">
  <li>
    <a href="#">Menu Item</a>
  </li>
</ul>
stackable-popover>
v>