An off-canvas nav factory service for AngularJS that makes it easy to add off-canvas navs to your app. Plunker demo
bower install angular-off-canvas
- Include the
off-canvas.js
script provided by this component into your app. - Optional: Include the
off-canvas.css
style provided by this component into your html. - Add
cn.offCanvas
as a module dependency to your app.
app.js
angular.module('myApp', ['cn.offCanvas']).
// let's make a nav called `myOffCanvas`
factory('myOffCanvas', function (cnOffCanvas) {
return cnOffCanvas({
controller: 'MyOffCanvasCtrl',
controllerAs: 'offCanvas',
templateUrl: 'my-off-canvas.html'
});
}).
// typically you'll inject the offCanvas service into its own
// controller so that the nav can toggle itself
controller('MyOffCanvasCtrl', function (myOffCanvas) {
this.toggle = myOffCanvas.toggle;
}).
my-off-canvas.html
<div class="off-canvas__nav">
<h3>Hello {{name}}</h3>
<p><a href ng-click="offCanvas.toggle()">Close Me</a></p>
</div>
index.html
<div ng-app="myApp" ng-controller="MyCtrl as ctrl">
<a href ng-click="ctrl.toggle()">Show the modal</a>
</div>
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.
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.
angular.module('myApp', ['cn.offCanvas']).
// let's make a nav called myOffCanvas
factory('myOffCanvas', function (btfModal) {
return btfModal({
controller: function () {
this.name = 'World';
},
controllerAs: 'ctrl',
template: '<div class="off-canvas__nav">Hello {{ctrl.name}}</div>'
});
}).
controller('MyCtrl', function (myOffCanvas) {
this.toggle = myOffCanvas.toggle;
});
<div ng-app="myApp" ng-controller="MyCtrl">
<a href ng-click="ctrl.toggle()">Toggle the nav</a>
</div>
The nav factory
. Takes a configuration object as a parameter:
var navService = cnOffCanvas({
/* options */
})
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
.
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.
string (recommended): URL to the HTML template to be used for this modal.
string|function (optional): The name of a controller or a controller function.
string (optional, recommended): Makes the controller available on the scope of the modal as the given name.
DOM Node (optional): DOM node to prepend. Defaults to document.body
.
string (optional): HTML class to add to the container. Defaults to is-off-canvas-opened
.
A navService
has just two methods: activate
and deactivate
.
Add or remove a class to open/hide the nav with CSS
You can run the tests with karma
:
karma start
MIT