angular-off-canvas

easily add an off-canvas navigation to your angular app
Homepage:
2 people use it
Author: 469908?v=2 cironunes

angular-off-canvas Build Status

An off-canvas nav factory service for AngularJS that makes it easy to add off-canvas navs to your app. Plunker demo

Install

Usage

  1. Include the off-canvas.js script provided by this component into your app.
  2. Optional: Include the off-canvas.css style provided by this component into your html.
  3. Add cn.offCanvas as a module dependency to your app.

Typical Use

app.js

my-off-canvas.html

index.html

Cleaning up

If you add any listeners within the nav's controller that are outside the nav's scope, you should remove them with $scope.$on('$destroy', fn () { ... }) to avoid creating a memory leak.

Inline Options

Note: The best practice is to use a separate file for the template and a separate declaration for the controller, but inlining these options might be more pragmatic for cases where the template or controller is just a couple lines.

API

cnOffCanvas

The nav factory. Takes a configuration object as a parameter:

And returns a navService object that you can use to toggle the nav (described below).

The config object must either have a template or a templateUrl option.

These options work just like the route configuration in Angular's $routeProvider.

config.template

string: HTML string of the template to be used for this modal. Unless the template is very simple, you should probably use config.templateUrl instead.

config.templateUrl

string (recommended): URL to the HTML template to be used for this modal.

config.controller

string|function (optional): The name of a controller or a controller function.

config.controllerAs

string (optional, recommended): Makes the controller available on the scope of the modal as the given name.

config.container

DOM Node (optional): DOM node to prepend. Defaults to document.body.

config.containerClass

string (optional): HTML class to add to the container. Defaults to is-off-canvas-opened.

navService

A navService has just two methods: activate and deactivate.

navService.toggle

Add or remove a class to open/hide the nav with CSS

Tests

You can run the tests with karma:

License

MIT

comments powered by Disqus
This page was last updated about 3 years ago.