eu81273 / angular.panels Goto Github PK

View Code? Open in Web Editor NEW

90.0 13.0 37.0 300 KB

Pure AngularJS based SidePanels (no jQuery)

Home Page: http://eu81273.github.io/angular.panels/

License: MIT License

JavaScript 70.87% CSS 29.13%

angular.panels's Introduction

Angular Panels

Pure AngularJS based lightweight(1.7KB) Side Panels.

Demo

http://eu81273.github.io/angular.panels/

Installation

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

<script type="text/javascript" src="angular.panels.js"></script>
<link rel="stylesheet" type="text/css" href="angular.panels.css">

And add panels container tag to your application.

<div data-panels="true"></div>

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.

See LICENSE

angular.panels's People

Contributors

Stargazers

Watchers

angular.panels's Issues

Cannot read property 'scope' of undefined

Hello,

I've just installed angular.panels by bower and configured as in the tutorial.

when I call panels.open('left-menu') I get this error:

TypeError: Cannot read property 'scope' of undefined
    at Object.s.open (angular.panels.min.js:formatted:21)

here is my config:

.config(['panelsProvider', function (panelsProvider) {
    panelsProvider
        .add({
            id: 'left-menu',
            position: 'left',
            size: '700px',
            templateUrl: 'components/leftmenu/leftmenu.html',
            controller: 'LeftMenuCtrl'
        });
  }

and this is my controller:

(function() {
    'use strict';
    function LeftMenuCtrl($scope) {
        var self = this;
        self.init = function() {
            console.log('left panel');
        };
        self.init();
    }

    angular.module('myapp')
        .controller('LeftMenuCtrl', ['$scope', LeftMenuCtrl]);
})();

Any ideas?

thanks in advance,
Daniele

Can't install with bower

hi! I wanted to use your module, but I couldn't install it with bower.

Here is my bower file:

{ "name": "un-nombre", "version": "0.0.0", "dependencies": { "angular": "^1.3.0", "bootstrap-sass-official": "^3.2.0", "angular-animate": "^1.3.0", "angular-cookies": "^1.3.0", "angular-resource": "^1.3.0", "angular-route": "^1.3.0", "angular-sanitize": "^1.3.0", "angular-touch": "^1.3.0", "angular-carousel": "~0.3.10", "angular.panels": "https://github.com/eu81273/angular.panels.git" }, "devDependencies": { "angular-mocks": "^1.3.0" }, "appPath": "app", "moduleName": "unNombreApp" }

and the error is

Additional error details: Unexpected token ]

I hope you can fix this, because I really liked your module @.@

.success is not a function (Angular 1.5+)

Needs to be migrated to .then()

How to preload and pass data to panel before showing it?

Thanks for your great contribution!

I would like to show more details inside a panel, but first, I need to fetch that from the server then render it on the panel.

Is it possible? How can I do that?

Proper release tags.

Hi, thanks for a neat module, can you please make proper releases with git tag so we can add this to e.g. https://rails-assets.org

https://help.github.com/articles/creating-releases/
https://git-scm.com/book/en/v2/Git-Basics-Tagging

Thanks :)

Cannot use templateCache with bower

As part #7 templateCache support was added, but files under dist are outdated, could you generate them with the latest changes and publish 1.0.4 it is required to use it with bower, Thank you.

Error

Cannot read property 'add' of undefined

Can't use the callback on the close function

Hi,

Could you provide an example with the openCallbackFunction or closeCallbackFunction> I don't know how to call the method.

Thanksss