angularjs动态侧边栏菜单_Angular-Panels

Angular Panels

Pure AngularJS based lightweight(1.7KB) Side Panels.

Demo

Installation

Copy the script and css into your project and add a script and link tag to your page.

And add panels container tag to your application.

Add a dependency to your application module and configure panel settings.

var app = angular.module('myApp', ['angular.panels']);

app.config(['panelsProvider', function (panelsProvider) {

panelsProvider

.add({

id: "testmenu",

position: "right",

size: "700px",

templateUrl: "../resources/template/testmenu.html",

controller: "testmenuCtrl"

})

.add({

id: "testpanel",

position: "right",

size: "80%",

templateUrl: "../resources/template/testpanel.html",

controller: "testpanelCtrl",

closeCallbackFunction: "testpanelClose"

});

}]);

attributes are..

id : panel's unique id.

position : the side panel slides from top/right/bottom/left.

size : panel's height or width. unit(px,em,%..) is required.

templateUrl : panel template url.

controller : panel's controller name.

openCallbackFunction : panel open callback.

closeCallbackFunction : panel close callback.

Open panel

Opening panel also very simple. Inject panels service to your app then call the service method like below.

var app = angular.module('myApp', ['angular.panels']);

app.config(['panelsProvider', function (panelsProvider) {

panelsProvider

.add({

id: "testmenu",

position: "right",

size: "700px",

templateUrl: "../resources/template/testmenu.html",

controller: "testmenuCtrl"

});

}]);

app.controller('defaultController', function($scope, panels) {

//open testmenu panel

panels.open("testmenu");

});

app.controller('testmenuCtrl', function($scope) {

//left panel controller

});

Browser Compatibility

IE9+, Chrome, Safari

Changelogs

version 1.0.3

add provider to configure panels

remove limitation of number of panel

version 1.0.0

first release

License

The MIT License.

Copyright ⓒ 2015 AHN JAE-HA.