diff --git a/src/offcanvas/docs/demo.html b/src/offcanvas/docs/demo.html
index f61fe1c..89c7ffd 100644
--- a/src/offcanvas/docs/demo.html
+++ b/src/offcanvas/docs/demo.html
@@ -16,7 +16,7 @@
OffCanvas
diff --git a/src/offcanvas/docs/readme.md b/src/offcanvas/docs/readme.md
index 2f473c4..ef24016 100644
--- a/src/offcanvas/docs/readme.md
+++ b/src/offcanvas/docs/readme.md
@@ -9,6 +9,7 @@ The off canvas module expects the use of several nested elements with the follow
- `left-off-canvas-toggle`: Wraps the left off canvas menu.
- `right-off-canvas-toggle`: Wraps the right off canvas menu.
- `exit-off-canvas`: Occludes the main page content when an off canvas menu is visible. Hides the menu when clicked.
-- `off-canvas-list`: Contains off canvas menu items. Hides the menu after a nested link is clicked.
+- `off-canvas-list`: Contains off canvas menu items.
+- At default the menu hides after a nested link is clicked. Set the `close-on-click` attribute to false to prevent this action. You can reference a scope variable, too.
See the demo page for example on how to use this and see the [Foundation docs](http://foundation.zurb.com/docs/components/offcanvas.html) for more details.
diff --git a/src/offcanvas/offcanvas.js b/src/offcanvas/offcanvas.js
index 40ca09d..f934d62 100644
--- a/src/offcanvas/offcanvas.js
+++ b/src/offcanvas/offcanvas.js
@@ -70,11 +70,16 @@ angular.module("mm.foundation.offcanvas", [])
}])
.directive('offCanvasList', [function () {
return {
+ scope: {
+ closeOnClick: "="
+ },
require: '^offCanvasWrap',
restrict: 'C',
link: function ($scope, element, attrs, offCanvasWrap) {
element.on('click', function () {
- offCanvasWrap.hide();
+ if ($scope.closeOnClick !== false) {
+ offCanvasWrap.hide();
+ }
});
}
};
diff --git a/src/offcanvas/test/offcanvas.spec.js b/src/offcanvas/test/offcanvas.spec.js
index dec3310..ff537d1 100644
--- a/src/offcanvas/test/offcanvas.spec.js
+++ b/src/offcanvas/test/offcanvas.spec.js
@@ -20,7 +20,7 @@ describe('offcanvas directive', function () {
'' +
'' +
'' +
@@ -78,4 +78,11 @@ describe('offcanvas directive', function () {
expect(element).isClosed();
});
+ it('does not close after clicking on a list item with close-on-click=false', function() {
+ $('.left-off-canvas-toggle', element).trigger('click');
+ expect(element).leftOpen();
+ $('.left-off-canvas-menu > .off-canvas-list', element).trigger('click');
+ expect(element).leftOpen();
+ });
+
});