https://github.com/slavede/bootang
Responsive AngularJS directives around Bootstrap components for doing it Angular way
https://github.com/slavede/bootang
Last synced: 27 days ago
JSON representation
Responsive AngularJS directives around Bootstrap components for doing it Angular way
- Host: GitHub
- URL: https://github.com/slavede/bootang
- Owner: slavede
- License: mit
- Created: 2014-05-28T21:24:12.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2014-06-17T21:47:29.000Z (about 12 years ago)
- Last Synced: 2025-02-16T01:09:42.337Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 336 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
BootAng
=======
Angular Directives around Bootstrap components for less pain.
This library is used for getting simple AngularJS directives which are wrapped around the Bootstrap3.
# Contents
* [Installation](#installation)
* [Components](#components)
* [BootAng Menu](#menu)
* [Bootang Popover](#popover)
# Installation
Via bower:
`bower install bootang --save`
Put this inside your html:
``
`` (this has to be loaded after AngularJS and Bootstrap)
# Components
## Menu
### Demo
### Usage - HTML
``
### Usage - Controller
$scope.bootangOptions = {
items : [
{
type : 'url',
display : 'Home',
url : '#/home'
},
{
type : 'url',
display : 'Blog',
url : '#/blog'
},
{
type : 'dropdown',
display : 'Social Media',
items : [
{
type : 'url',
display : 'Facebook',
url : '#/facebook'
},
{
type : 'url',
display : 'Twitter',
url : '#/twitter'
},
{
type : 'divider'
},
{
type : 'url',
display : 'Google+',
url : '#/googleplus'
},
{
type : 'url',
display : 'Instagram',
url : '#/instagram'
},
]
},
{
type : 'url',
display : 'About Us',
url : '#/about_us'
}
],
topMenu : false,
inverse : true
};
where:
* topMenu - if true, it will make menu without rounded corners
* inverse - bootstrap coloring
* items - list of menu entries, it can be type "dropdown" (submenu) or "url" (link)
## Popover
### Demo
### Usage - HTML
Assign class 'bootang-popover' to element to which you want to attach it.
`My Span for Popover`
### Usage - Controller
Directive accepts three properties.
* bootang-options - default bootstrap options for popover described here http://getbootstrap.com/javascript/#popovers-usage
* bootang-methods - json with following properties:
* show - when set to true, displays popover
* hide - when set to true, hides popover
* toggle - when set to true, toggles popover
* destroy - when set to true, closes and removes popover from DOM
* bootang-events - callbacks being triggered when popover is shown or hidden, can be:
* show - called just before showing popover
* shown - called just after showing popover
* hide - called just before hiding popover
* hidden - called just after hiding popover
$scope.bootangOptions = {
placement : 'bottom',
title : 'My Popover Title',
content : 'This will be conent of my popover, you know?'
};
$scope.bootangEvents = {};
$scope.bootangEvents.show = function(e) {
alert('I will show popover');
};
$scope.bootangMethods = {};
// this can be event for ng-click on some button
$scope.showPopover = function() {
$scope.bootangMethods.show = true;
};
// this can be event for ng-click on some button
$scope.hidePopover = function() {
$scope.bootangMethods.hide = true;
};
// this can be event for ng-click on some button
$scope.togglePopover = function() {
$scope.bootangMethods.toggle = true;
};
// this can be event for ng-click on some button
$scope.destroyPopover = function() {
$scope.bootangMethods.destroy = true;
};