<div ng-controller="TestController as test">
<stackable-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>
</div>
function TestController() {
this.isOpen = false;
this.modalClosing = function(err, result) {
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: '<div ng-transclude></div>',
link: function(scope, element, attrs, ctrl) {
ctrl.close(null, 'closed from inner directive');
}
};
}
});
<div ng-controller="TestController as test">
<button
stackable-trigger="test.popoverState"
stackable-toggle="'active'">
<i class="caret"></i>
</button>
<stackable-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>
</div>
<div ng-controller="TestController as test">
<button stackable-trigger="test.menuState">
<i class="caret"></i>
</button>
<stackable-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>
</div>