nickperkinslondon / angular-bootstrap-nav-tree Goto Github PK

View Code? Open in Web Editor NEW

678.0 46.0 299.0 286 KB

An AngularJS directive that creates a Tree based on a Bootstrap "nav" list.

License: MIT License

CoffeeScript 51.61% JavaScript 7.65% HTML 40.75%

angular-bootstrap-nav-tree's Introduction

angular-bootstrap-nav-tree

This is a Tree directive for Angular JS apps that use Bootstrap CSS.

example: http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/bs3_ng120_test_page.html

The style is completely Bootstrap because the tree is actually just a Bootstrap "nav" list, with a few changes: Indentation is added, expand/collapse icons are added, and Angular CSS animations are used during expand/collapse.

The abn-tree now works Bootsrap 2, or Bootstrap 3, and with Angular 1.1.5 or 1.2.0

The normal Glyphicons work well, but they appear black instead of blue. Alternatively, you can use the Font Awesome icons, which look even better, and match the blue color of the text.

You can change the icons used by specifying them in html attributes.

This tree is developed using CoffeeScript and Jade, but you don't need to be using either of those to use this tree -- you just have to be using Angular and Bootsrap.

How to use it: Just include the 2 files from "dist",

abn_tree_directive.js
abn_tree.css

Add 'angularBootstrapNavTree' to your module's list of dependencies.

Then put an <abn-tree> directive in your HTML. ( see the example in "test" )

At a miniumum, you must supply tree-data :

<abn-tree tree-data="example_treedata"></abn-tree>

But there are other attributes to customize the tree:

<abn-tree 
    tree-data         = "my_treedata"
    tree-control      = "my_tree"
    icon-leaf         = "icon-file"
    icon-expand       = "icon-plus-sign"
    icon-collapse     = "icon-minus-sign"
    on-select         = "my_tree_handler(branch)"
    expand-level      = "2"
    initial-selection = "Vegetable">      
></abn-tree>

The example uses Font-Awesome 3, but Font-Awsome 4 also works. Use the following syntax:

icon-leaf = "fa fa-file"

( in general, use spaces to apply multiple classes to icon elements )

The data to create the tree is defined in your controller, and could be as simple as this:

$scope.my_data = [{
  label: 'Languages',
  children: ['Jade','Less','Coffeescript']
}]

There is a long-form for elements, in which each node is an object with a "label", and optionally other stuff like "data", and "children". There is a short-form for listing nodes children (as used for "children" above), where the "children" is just a list of strings. If you use the short-form for listing elements, then your "on-select" function will have to act based only upon the "branch.label". If you use the long-form, where is branch is an object, then you can also attach "data" to a branch.

If you would like to add classes to a certain node, give it an array of classes like so:

$scope.my_data = [{
  label: 'Languages',
  children: ['Jade','Less','Coffeescript']
  classes: ["special", "red"]
}]

Each element without children, or leaf, is automatically given a leaf class. If you would like to force certain nodes not to be leaves (won't get leaf class and will show expand/collapse icons), set noLeaf to true in a long-form listing like so:

{
  label: 'Coffeescript',
  noLeaf: true
}

You can supply a single default "on-select" function for the whole tree -- it will be called whenever a branch is selected:

$scope.my_tree_hander = function(branch){...}

Or, you can put a custom "on-select" function on an individual branch:

$scope.my_data = [{
  label: 'Languages',
  onSelect: function(branch){...},
  children: ['Jade','Less','Coffeescript']
}]

Each branch can have a "data" element which you can use to hold whatever data you want. It is not touched by the tree, and it is available to your "on-select" function as "branch.data". In the example, in the "test" folder, this technique is used in "my_tree_handler" to add extra info to "Dog","Cat", and "Hippo".

Warning: If you attach extra attributes directly to a branch (instead of to "branch.data"), they could conflict with the internal workings of the tree, which adds branch attributes at runtime, like "expanded" and "selected".

Tree-Control API: If you pass an empty object to the tree as "tree-control", it will be populated with a set of functions for navigating and controlling the tree. See the example page for a demo...

angular-bootstrap-nav-tree's People

Contributors

Stargazers

Watchers

Forkers

sriramks85 skylerdougherty sjclemmy christianw dublx baspete tickcode yogibear77 binocarlos jrupac pengcs michaelryancaputo johnmcteague maralik iyogeshjoshi makeclan gildonei viktor-bjorn ocaddons bachue anthrich daneestar mthebert ruifortes prathyushaboppana baggachipz eugeneiiim nickman mt0803 lyric jonaswindey kparma deanhayden1979 ppuleo magnetonbora haemp bbodenmiller sclausen sasogr makigjuro mmaestri subatomichero andrewmurray ba-group chensheng1357 obazoud hh-akonstantinov bojank apexforcedev arcseldon ziscloud brighthas tcdevs supul synegen vinaynijhawan awaisa khan4019 kuaixiangai bruiztorres digitalabs magro robertsambuena jziggas prakash2089 tmder yacu01 jotadepaula kanarci tobato geeker-me blawrence75 frankwong johanvdwest pskowron adautobarros pensacola1989 portchaw imranmd martinnuc harpax vrigzalejo alexproca palepail hendrysuwanda khalihan versifittechnologies larvs malcolmm83 joshyu wadahiro myosotys kalyanchakri1010 kgruhler chesterthecat lafar6502 szmufo joseinthearena tejashreekate pombredanne

angular-bootstrap-nav-tree's Issues

Does this library have versions?

I was trying to figure out what version of it I had loaded so I can then tell later if it has changed or not. Do you have a version number on each build of these files?

Slow with over 2000 branches

Performance is really poor when dealing with a large tree.

Expanding/Collapsing node triggers onSelect

Expanding or Collapsing node triggers onSelect callback. I am not sure if that is intended...

It would be acceptable if there was a way to differentiate if node was actually selected or only expanded/collapsed. Maybe bool property on branch object?

can we add sort functionality to the tree view ?

How difficult will it be to add sort and filter feature to this tree ?

Can we add this to a CDN

I'd like to use this over CDNjs is possible.

Problems when you have two trees in the same HTML page.

If you have two tree's on the same page using the same tree-data, It sometimes makes it look like you are selecting two things when you click a branch of one tree, and a branch of the other. Also, when you are trying to set the initial date using an angular model on both, one of the two needs to be in the curly braces.

tag a branch as expandable without having children

for lazy data loading I would like to mark a branch as expandable without having children e.g until the user clicks on it

Tree loses indentation when changing the model

Hi there,

When I changed the treeData going into the directive (new tree maybe or reloading an old tree) the "structure" is lost. All the nodes and leaves are aligned in indentation.

Expanding/collapsing still works, but the indentation is no longer applied.

Thanks,

Martin

"collapse" animation does not work with Bootstrap 3 / Angular 1.1.5

The Bootstrap 3 example for Angular 1.1.5 does not animate the collapse properly. All other expand and collapse animations on all 4 pages work properly.
I can't figure out why!
I hope someone can help me figure it out.

Populating tree from ajax call

Ive got a simple use case of loading the tree from a REST api using $http. My controller is:

var app , deps;

deps = ['angularBootstrapNavTree'];

app = angular.module('app', deps);

app.controller('ReportsControl', function ($scope, $http) {
   $http.get("/rest/folders").success(function(data){
  $scope.folders = data;
  });
});

And in my html I have:

    <div style="width:250px;margin-left:100px;background:whitesmoke;border:1px solid lightgray;border-radius:5px;">
        <abn-tree tree-data="folders" icon-leaf="icon-file" expand-level="2"></abn-tree>
    </div>

However I get the alert for "treeData should be an array of root branches". If My controller returns a static array of objects all is well. The folders attribute of $scope is not being set before the tree is attempting to render.

IE8 Support

Unfortunately I am looking to support browsers as far back as IE8. Ive not had much success getting the tree to work on IE8. There is nothing specific in your docs to say it does not support IE8, and Angular 1.2.x still supports IE8.

Has anyone had any luck with it?

Add configuration-option for forcing the text of each node to appear in a single line (with overflow hidden)

Adding a css rule ala:

.tree-label { white-space: nowrap; }

doesn't seem to cut it and even if there is a css tweak one can make to force the text of each node to appear in a single line, the built-in option would seem to me to be a bit more reliable.

Tree Control API: Cannot read property 'parent_uid' of undefined

This error occurs anytime you try to use any API functions like get_next_branch or get_closest_ancestor_next_sibling on the root node of any tree, or the last leaf of any tree.

Selecting same branch twice

If I have a branch without children and click it twice the $scope.events_tree_handler only fires once, you need to click on another branch and back to the first t get it to fire again.

I've hacked abn_tree_directive.js to get this to work:

scope.user_clicks_branch = function(branch) {
if (branch !== selected_branch) {
var ret = select_branch(branch);
selected_branch = null;
return ret;
}
};

Expand-level not working while loading data using $resource for me

Hi,

I have this :

When treeData are setup in controller, it`s expanding. If i am loading data using $resource
and filling data in get().$promise.then function, my tree is not expnading to level 2.

My guess is, that its because my data are created empty first and filled later in promise and that i should use some $watch but i dont know how.

Thank you,
Denis

Scrolling support

Multiple trees have same state

Multiple trees on the same page have the same state. Example: open one tree and note the other tree is opened too.

dbl-click event

Please, add collapse on dbl click or add a new attribute on-dbl-click="func(branch)" in directive.

Can you please add "parent" and "parents" methods to branch?

Hi,

I'm trying to get all parents of the active branch, but I can't find any way to do this in current code.
That's why I have to hack the script:

branch.parent = function() {
  var result;
  for_each_branch(function(br) {
    var children = br.children, i, len;
    if (children) {
      for (i = 0, len = br.children.length; i < len; i++) {
        if (_.isEqual(children[i], branch)) {
          result = br;
          break;
        };
      }
    }
  });
  return result;
};
branch.parents = function() {
  var current = branch, results = [];
  while (true) {
    if (current = current.parent())
      results.unshift(current);
    else
      break;
  }
  return results;
}

But my hack depends on underscore.js because of the deep comparison, you can implement it by yourself. Thanks!

Setting collapse all as default?

Is there an attribute we can set so the tree is collapsed on load?

add to nuget

Similar to your Bower support would be great to add this to NuGet.

Drag and Drop possiblity

hi,
awesome work,
is it possible to offer drag and drop?

thanks in advanced.

Set initial selection from JavaScript or controller

Is it possible to programmatically set the initial selection of the nav tree? When the nav tree is clicked, I am setting a variable in my controller's scope to save the current node label, and then setting location.href to switch to a new page. When the page reloads, the tree forgets its previous selection. Is it possible for me to set the initial tree selection from my controller, or the ready function, to a specific branch label?

Initial-selection item with space breaks tree

When selecting an initial item by label name, an item with a space will break the tree on page load. Example used for this was the BS3.0/ng 1.2 test, and setting initial selection to 'Granny Smith':

Error: [$parse:syntax] http://errors.angularjs.org/undefined/$parse/syntax?p0=Smith&p1=is%20an%20unexpected%20token&p2=8&p3=Granny%20Smith&p4=Smith

Tag commits so I can use bower.

Right now, I can only use master in bower. I'd like to be able to lock to versions.

Could you tag a release so I can fix to a version?

Would be great to add bower support.

Any way i can achieve to get the child nodes using a Get Call?

Hi,

I like to know can we get the child nodes in ajax way rather than populate all in one go?

Kind Regards
Kay

Multiple Selection of nodes

Currently we can select either group or individual nodes. But let say the group has three nodes and I want to select two only how can I do it?

problems with boostrap 3.0.0

Hi,

very nice work, but display is not correct with bootstrap 3.0.0.

I have roughly fixed that at https://github.com/christianw/angular-bootstrap-nav-tree

Please check and integrate if you think it's worth.

Regards
Christian

Project License?

What is the license for this project? There isn't one specified that I could find.

Incorrect working with lazy load data

..controller_start...

MyModel.get_tree(function(data){
$scope.example_treedata = data
})

..controller_end...

In view: abn-tree header="" tree-data="example_treedata" icon-leaf="icon-file" on-select="my_default_handler(branch)" expand-level="2" initial-selection="2"></abn-tree

"Initial-selection" and "Exand-level" doesn't work, but tree is rendered.

add tree#remove_branch(branch) function

look this

brighthas@dd1816b

Converting circular structure to JSON

When I try the most basic example you provided, I get the following:

TypeError: Converting circular structure to JSON
at Object.stringify (native)
at toJson (http://localhost:52155/lib/angular/angular.js:920:15)
at Scope.$get.Scope.$digest (http://localhost:52155/lib/angular/angular.js:10576:48)
at http://localhost:52155/lib/angular/angular.js:10735:26
at completeOutstandingRequest (http://localhost:52155/lib/angular/angular.js:3740:10)
at http://localhost:52155/lib/angular/angular.js:4041:7

Any ideas?

Expand/collapse is broken on angularjs version > 1.2.12

From angularjs > 1.2.12 and < 1.2.20
Behavior: Expand and collapse does not change the icon-expand and icon-collapse.
Inspector error:

TypeError: undefined is not a function
    at Object.Attributes.$updateClass (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:5431:20)
    at Object.ngClassWatchAction [as fn] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:17476:20)
    at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:11898:29)
    at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:12151:24)
    at HTMLElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:18085:21)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:2626:10
    at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:311:20)
    at HTMLElement.eventHandler (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:2625:5)

From angularjs >= 1.2.20
Behavior: Same as above plus toggling expand/collapse 5 times will lock tree and lose ability to expand/collapse further. The icon-expand and icon-collapse disappear.
Inspector error:

TypeError: undefined is not a function
    at updateClasses (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js:18307:22)
    at Object.ngClassWatchAction [as fn] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js:18318:15)
    at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js:12447:29)
    at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js:12712:24)
    at HTMLElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js:18980:21)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js:2823:10
    at Array.forEach (native)
    at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js:325:11)
    at HTMLElement.eventHandler (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js:2822:5)

Feature Request - Font Awesome 4 Support

Problems with Karma testing

Hi,

I used the nav tree in a project and it works fine, thank you very much for this angularjs extension!

But when I started to implement tests they failed with:

PhantomJS 1.9.7 (Linux) Controller: ChannelsCtrl encountered a declaration exception FAILED
TypeError: '[object Object]' is not a function (evaluating 'module("myApp")')

I figured out to solve the Problem by patching your js file but I don't know how to do this in coffee script so I could not create a pull request. The changes are only in the first couple of lines. I changed:

var module;

module = angular.module('angularBootstrapNavTree', []);

module.directive('abnTree', function($timeout) {

angular.module('angularBootstrapNavTree', [])
.directive('abnTree', function($timeout) {

which works for me. Would be nice if you could solve this problem or have you any other idea?

Sebastian

possibility to apply different template without forking

it would be nice to be able to define a different template as an attribute

<abn-tree template="myTemplate.html" .../>

expand-level doesn't work on scope change

hello,

like in you sample : http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/bs3_ng120_test_page.html
when clicking button,the expand level is not applyed.

thanks for your work

Is it possible to select multiple nodes from a tree structure?

Right now we can select only one node from given tree structure. Is it possible to select multiple nodes from a tree structure.

Search filter for the angular-bootstrap-nav-tree

Hi Nick,

Do you know if there is an implementation of a search filter that will work with the angular-bootstrap-nav-tree?

Thanks,

Downloadable bower version

I would love to be able to download and use your great directive using bower.
When will there be a released version ready?

Thanks for your help.
Lars.

browser.json uses "angularjs" instead of "angular"

Hi,

why is "angularjs" as package used instead of simply "angular"? Most of all angular based libraries are based on the main "angular" github/bower package.

As the "angularjs" package seems not to provide any version numbers, the installation fails in my case with:

bower angularjs#>=1.0 ENORESTARGET No tag found that was able to satisfy >=1.0

Add leaf class to leaves

Would be nice if we could tell which

is a leaf, for styling or otherwise.

Search Functionality

Is there any way to add search functionality to the tree?

Templating node labels

If there is some possibility for templating node label? I need add some additional text to parent nodes, but I can't find how to do that.

Get next branch call on last branch results in exception

When running the demo application, if you have the console open while clicking Get Next Branch, you will get the following exception thrown when clicking that button on the last branch node.

TypeError: Cannot read property 'parent_uid' of undefined
    at get_parent (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:112:22)
    at Object.tree.get_parent_branch (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:269:24)
    at Object.tree.get_closest_ancestor_next_sibling (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:404:33)
    at Object.tree.get_closest_ancestor_next_sibling (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:405:31)
    at Object.tree.get_closest_ancestor_next_sibling (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:405:31)
    at Object.tree.get_closest_ancestor_next_sibling (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:405:31)
    at Object.tree.get_closest_ancestor_next_sibling (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:405:31)
    at Object.tree.get_next_branch (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:418:33)
    at Object.tree.select_next_branch (http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/dist/abn_tree_directive.js:429:31)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:10220:21

It gives me an error: "ENORESTARGET No tag found that was able to satisfy 0.2.0"