Examples

A simple modal

``html


      stackable-disable-escape="false"
    stackable-closing="test.modalClosing(err, result)"
    stackable-closed="test.modalClosed(err, result)">
    
      
        Test Dialog

`js function TestController() { this.isOpen = false;

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

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

module.directive({ innerDirective: function() { return { restrict: 'A', require: '^stackable', replace: true, transclude: true, template: '

',
      link: function(scope, element, attrs, ctrl) {
        // use stackable controller API to close stackable programmatically
        ctrl.close(null, 'closed from inner directive');
      }
    };
  }
});


A simple popover

`html


      stackable-trigger="test.popoverState"
    stackable-toggle="'active'">
    
  
      stackable-placement="bottom"
    stackable-alignment="center"
    stackable-enable-escape="true">
    
Title

    
      Hello World


A simple menu

`html


  
      stackable-hide-arrow="true"
    stackable-placement="bottom"
    stackable-alignment="right"
    stackable-enable-escape="true">
    

      
        Menu Item

angular-stackables
==================

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

Examples

A simple modal

``html


      stackable-disable-escape="false"
    stackable-closing="test.modalClosing(err, result)"
    stackable-closed="test.modalClosed(err, result)">
    
      
        Test Dialog

`js function TestController() { this.isOpen = false;

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

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

module.directive({ innerDirective: function() { return { restrict: 'A', require: '^stackable', replace: true, transclude: true, template: '

',
      link: function(scope, element, attrs, ctrl) {
        // use stackable controller API to close stackable programmatically
        ctrl.close(null, 'closed from inner directive');
      }
    };
  }
});


A simple popover

`html


      stackable-trigger="test.popoverState"
    stackable-toggle="'active'">
    
  
      stackable-placement="bottom"
    stackable-alignment="center"
    stackable-enable-escape="true">
    
Title

    
      Hello World


A simple menu

`html


  
      stackable-hide-arrow="true"
    stackable-placement="bottom"
    stackable-alignment="right"
    stackable-enable-escape="true">
    

      
        Menu Item