wix-incubator / angular-tree-control Goto Github PK

I know there is an option to do that #14, but it's require to provide all nodes to be expanded. But if you want to expand all nodes it's not convenient.

I have an api which return data in the right form node, children[..] and it's redundant to have to extract all nodes.

An option should be added to expand all nodes if defaultExpanded array is empty or a wildcard '*' should be handled by defaultExpanded.

Here is the example data set as defined on the git page:

[
    { "name" : "Joe", "age" : "21", "children" : [
        { "name" : "Smith", "age" : "42", "children" : [] },
        { "name" : "Gary", "age" : "21", "children" : [
            { "name" : "Jenifer", "age" : "23", "children" : [
                { "name" : "Dani", "age" : "32", "children" : [] },
                { "name" : "Max", "age" : "34", "children" : [] }
            ]}
        ]}
    ]},
    { "name" : "Albert", "age" : "33", "children" : [] },
    { "name" : "Ron", "age" : "29", "children" : [] }
];

However, when I change "Gary" to "Joe", the tree no longer works:

[
    { "name" : "Joe", "age" : "21", "children" : [
        { "name" : "Smith", "age" : "42", "children" : [] },
        { "name" : "Joe", "age" : "21", "children" : [
            { "name" : "Jenifer", "age" : "23", "children" : [
                { "name" : "Dani", "age" : "32", "children" : [] },
                { "name" : "Max", "age" : "34", "children" : [] }
            ]}
        ]}
    ]},
    { "name" : "Albert", "age" : "33", "children" : [] },
    { "name" : "Ron", "age" : "29", "children" : [] }
];

This only happens when both the name and the age match. For now, I've worked around this by adding a unique ID to my objects, but an issue worth noting, I though. Awesome project, though!

Why is (isLeaf) function called on every single node in the tree when a node is selected?

Hi,
Is implementing drag&drop mechanism on the plan for the future?

Thanks.

I've made it into plunker http://plnkr.co/edit/uaLV66Nuse70fv74vBfV?p=preview

Steps to reproduce:
1- Expand Folder 1.
2- Expand Sub-Folder 1.
3- Expand Folder 2.
4- Expand Sub-Folder 1.

= Folder 1/Sub-Folder 1, collapses.

I believe it is a bug?

It would be nice to have a template on one of these sites to get started playing around with the control. Thanks for the great work!

Hey all,

first of: thanks for creating such a directive. I really like the way it works. Though I'm struggling with a particular issue:

My backend is proving me the following JSON response:
[
{
"id": "/storage",
"nodename": "storage",
"children": [
{
"id": "/storage/Test Dir",
"nodename": "Test Dir",
"children": []
}
]
}
]

Resulting in getting the node "Test Dir" displayed as a file, though it's a folder. I believe this happens based on the fact, that it has no children, currently.

However, after digging a lil deeper I figured that if children would be like: "children": {}, the tree view would display it as a folder.

Maybe I'm not deep enough yet, but what's the exact reason for this handling? Do you have any ideas for maybe needed workaround? Or is there a better way to difference between folders and files? :)

Thanks in advance.

Cheers!

Isolated scope is great, but there's presently no way to pass anything supplemental in to the tree-control. Provide a means for users to inject additional items into the isolated tree control scope.

I've been trying to implement a way to grab all the expanded nodes to know which ones are open. It would be awesome if there was an implementation to get all the expanded ones. If not, is there an easy way to $watch the property?

A minified distribution and a source map in the bower package would be ideal.

Not sure if you're already aware or know more about it than I do, but it looks like angular 1.3.x (currently at beta 14) uses integer-based scope ids instead of the "00A" format. This leads to scope.$id and "unfound id" keys of expandedNodesMap bleeding into each other in some cases, causing unexpected results.

Hello All,

I want to search tree nodes.User can enter any value in input box that word should be searched from treeview. and searched word should be highlighted in provided result.

Does any one implement this functionality?

I am able to render the data If I have a static data. But I am unable to render the data if I make a dynamic request. I would like to have a sample code which will make angular HTTP post request and render the data.

More of a question than an issue. I want to pass in the current node on an ng-click of a button that is not part of the tree. The function addDiaryProgress is showing node as undefined. Can you point me in the right direction please.

Here's my html

        <button class="btn btn-default" ng-click="addDiaryProgress($event,node)" ng-show="isDiaryEntry || isDiaryProgress" name="addDiaryProgress">Add Diary Progress</button>

        <treecontrol class="tree-classic"
                     tree-model="diaryTreeData"
                     options="diaryTreeOptions"...

I have model like this :

[{
uniqueName: "[Account]",
hierarchies: [{
dimensionUniqueName: "[Account]",
levels: [{
    id: "0",
    uniqueName: "[Account].[Account Number].[(All)]",
}]
 }]
}]

i have not children node but i have hierarchies and leves . so how to make tree view with this model and angular-tree-control

I have a scenario which I need the tree state, meaning:
an indicator to know if a tree-item/s (and/or its children) is open or closed.

Hi I'm using https://github.com/ngbp/ngbp which uses AngularJS v1.2.22 and have included the angular-tree-control via a bower install. Just using your basic example on the github page I get this output

<treecontrol class="tree-classic ng-isolate-scope" tree-model="dataForTheTree" options="treeOptions"
             on-selection="showSelected(node)" selected-node="node1">
  <ul class="ng-scope">
    <!-- ngRepeat: node in node.children | filter:filterExpression:filterComparator | orderBy:orderBy:reverseOrder -->
    <li ng-repeat="node in node.children | filter:filterExpression:filterComparator | orderBy:orderBy:reverseOrder"
        ng-class="headClass(node)" class="ng-scope"><i class="tree-branch-head a4" ng-class="iBranchClass()"
                                                       ng-click="selectNodeHead(node)"></i><i class="tree-leaf-head "></i>

      <div class="tree-label " ng-class="selectedClass()" ng-click="selectNodeLabel(node)" tree-transclude=""></div>
      <!-- ngIf: nodeExpanded() --></li>
    <!-- end ngRepeat: node in node.children | filter:filterExpression:filterComparator | orderBy:orderBy:reverseOrder -->
    <li ng-repeat="node in node.children | filter:filterExpression:filterComparator | orderBy:orderBy:reverseOrder"
        ng-class="headClass(node)" class="ng-scope"><i class="tree-branch-head a4" ng-class="iBranchClass()"
                                                       ng-click="selectNodeHead(node)"></i><i class="tree-leaf-head "></i>

      <div class="tree-label " ng-class="selectedClass()" ng-click="selectNodeLabel(node)" tree-transclude=""></div>
      <!-- ngIf: nodeExpanded() --></li>
    <!-- end ngRepeat: node in node.children | filter:filterExpression:filterComparator | orderBy:orderBy:reverseOrder -->
    <li ng-repeat="node in node.children | filter:filterExpression:filterComparator | orderBy:orderBy:reverseOrder"
        ng-class="headClass(node)" class="ng-scope"><i class="tree-branch-head a4" ng-class="iBranchClass()"
                                                       ng-click="selectNodeHead(node)"></i><i class="tree-leaf-head "></i>

      <div class="tree-label " ng-class="selectedClass()" ng-click="selectNodeLabel(node)" tree-transclude=""></div>
      <!-- ngIf: nodeExpanded() --></li>
    <!-- end ngRepeat: node in node.children | filter:filterExpression:filterComparator | orderBy:orderBy:reverseOrder --></ul>
</treecontrol>

Which I guess is ok but in the console I'm getting these errors...

3TypeError: undefined is not a function
    at link (http://127.0.0.1:3001/vendor/angular-tree-control/angular-tree-control.js:244:40)
    at nodeLinkFn (http://127.0.0.1:3001/vendor/angular/angular.js:6692:13)
    at compositeLinkFn (http://127.0.0.1:3001/vendor/angular/angular.js:6086:13)
    at nodeLinkFn (http://127.0.0.1:3001/vendor/angular/angular.js:6686:24)
    at compositeLinkFn (http://127.0.0.1:3001/vendor/angular/angular.js:6086:13)
    at publicLinkFn (http://127.0.0.1:3001/vendor/angular/angular.js:5982:30)
    at boundTranscludeFn (http://127.0.0.1:3001/vendor/angular/angular.js:6106:21)
    at controllersBoundTransclude (http://127.0.0.1:3001/vendor/angular/angular.js:6713:18)
    at ngRepeatAction (http://127.0.0.1:3001/vendor/angular/angular.js:20535:15)
    at Object.$watchCollectionAction [as fn] (http://127.0.0.1:3001/vendor/angular/angular.js:12370:13) <div class="tree-label " ng-class="selectedClass()" ng-click="selectNodeLabel(node)" tree-transclude=""> angular.js:10046(anonymous function) angular.js:10046(anonymous function) angular.js:7343nodeLinkFn angular.js:6695compositeLinkFn angular.js:6086nodeLinkFn angular.js:6686compositeLinkFn angular.js:6086publicLinkFn angular.js:5982boundTranscludeFn angular.js:6106controllersBoundTransclude angular.js:6713ngRepeatAction angular.js:20535$watchCollectionAction angular.js:12370Scope.$digest angular.js:12497Scope.$apply angular.js:12762done angular.js:8357completeRequest angular.js:8571xhr.onreadystatechange angular.js:8510
3TypeError: undefined is not a function
    at Scope.$scope.headClass (http://127.0.0.1:3001/vendor/angular-tree-control/angular-tree-control.js:84:65)
    at Object.get (http://127.0.0.1:3001/vendor/angular/angular.js:10821:21)
    at Scope.$digest (http://127.0.0.1:3001/vendor/angular/angular.js:12489:40)
    at Scope.$apply (http://127.0.0.1:3001/vendor/angular/angular.js:12762:24)
    at done (http://127.0.0.1:3001/vendor/angular/angular.js:8357:45)
    at completeRequest (http://127.0.0.1:3001/vendor/angular/angular.js:8571:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://127.0.0.1:3001/vendor/angular/angular.js:8510:11) angular.js:10046
3TypeError: undefined is not a function
    at Scope.$scope.headClass (http://127.0.0.1:3001/vendor/angular-tree-control/angular-tree-control.js:84:65)
    at http://127.0.0.1:3001/vendor/angular/angular.js:10821:21
    at Scope.$eval (http://127.0.0.1:3001/vendor/angular/angular.js:12658:28)
    at http://127.0.0.1:3001/vendor/angular/angular.js:18322:36
    at http://127.0.0.1:3001/vendor/angular/angular.js:5921:13
    at Scope.$eval (http://127.0.0.1:3001/vendor/angular/angular.js:12658:28)
    at Scope.$digest (http://127.0.0.1:3001/vendor/angular/angular.js:12470:31)
    at Scope.$apply (http://127.0.0.1:3001/vendor/angular/angular.js:12762:24)
    at done (http://127.0.0.1:3001/vendor/angular/angular.js:8357:45)
    at completeRequest (http://127.0.0.1:3001/vendor/angular/angular.js:8571:7) angular.js:10046
3TypeError: undefined is not a function
    at Scope.$scope.headClass (http://127.0.0.1:3001/vendor/angular-tree-control/angular-tree-control.js:84:65)
    at Object.get (http://127.0.0.1:3001/vendor/angular/angular.js:10821:21)
    at Scope.$digest (http://127.0.0.1:3001/vendor/angular/angular.js:12489:40)
    at Scope.$apply (http://127.0.0.1:3001/vendor/angular/angular.js:12762:24)
    at done (http://127.0.0.1:3001/vendor/angular/angular.js:8357:45)
    at completeRequest (http://127.0.0.1:3001/vendor/angular/angular.js:8571:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://127.0.0.1:3001/vendor/angular/angular.js:8510:11) 

The tree control is not visible. Have you any ideas what could be the cause of this?

I have found the way to get the current clicked node details using showSelected().But is there any way to get the details of the parent node of current clicked node?

Hi
Is there a way to use a filter on the tree? Or maybe hide nodes with a certain attribute on them?
Thanks!

How possible would it be to have a different set of data on child nodes something like

<treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   <span class="treelevel1">employee: {{node.name}} age {{node.age}}</span>
  <span class="treelevel2">hours: {{node.hours}} pay {{node.pay}}</span>
</treecontrol>

Silly example but you get my meaning...

Hey :),

when I added circular properties in my datamodel angular.clone() crashes (something like Stackoverflow Exception is thrown).

My datamodel looks like this:

node1.children -> node2, node3
node2.parent -> node1
node3.parent -> node1
...
and so on...

I changed your existing JFiddle a little bit to show you this case:
http://jsfiddle.net/8ApLX/171/

Best regards,
Thomas

I want to unselect the node when clicking on a selected node. I didn't find any example on the document page. So I use the following solution.

    <treecontrol class="tree-light" tree-model="treedata" selected-node="selectedNode" on-selection="selectNode(node)">
            {{node.name}}
    </treecontrol>

    $scope.selectedNode = null;

    $scope.selectNode = function(node) {
        console.log($scope.selectedNode, node);
        if($scope.selectedNode == node){
            $scope.selectedNode = null; //unselect function
        }else{
            $scope.selectedNode = node;
        }
    };

But it seems the on-selection function will not be triggered if the node clicked is selected. Anyone knows how to do this?

Another problem is that I cannot set selected-node as null, or an error will be raised. But there's conditions that we want no node be selected.

The selectedClass method compares current node to selected node using == (reference comparison) instead of calling the custom equality method that can be defined in the options.

In my example, I am sending data to a server via JSON and getting back an updated object. My equality method is checking key fields (id) that will remain unchanged during that translation. However, since this method only checks references, the updated tree does not retain the selected style on the current node.

on angular-tree-control.js:213:39

full error:
TypeError: undefined is not a function
at angular.module.directive.compile (http://localhost:7004/js/angular-tree-control.js:213:39)
at http://localhost:7004/lib/angular/angular.js:7492:44
at invokeLinkFn (http://localhost:7004/lib/angular/angular.js:7498:9)
at nodeLinkFn (http://localhost:7004/lib/angular/angular.js:7020:11)
at compositeLinkFn (http://localhost:7004/lib/angular/angular.js:6386:13)
at compositeLinkFn (http://localhost:7004/lib/angular/angular.js:6389:13)
at compositeLinkFn (http://localhost:7004/lib/angular/angular.js:6389:13)
at compositeLinkFn (http://localhost:7004/lib/angular/angular.js:6389:13)
at publicLinkFn (http://localhost:7004/lib/angular/angular.js:6265:30)
at link (http://localhost:7004/lib/angular/angular-route.js:951:7)

I like this implementation much better than angular-treeview, but one thing it gave is the ability to start with a tree or subtree expanded. The data structure included a collapsed property that you can set.

I don't see anything like this in this control. Am I missing something? Was this excluded on purpose? If not, any thoughts on the interface for doing this? (will you accept a PR?)

It seems like your code goes with the concept of 'expanded' instead of 'collapsed'. I can think of two ways to do this:

1. A data node can include a 'expanded' property. If it exists, it sets the default state. This would be analogous to the way angular-treeview does it. I don't care for this so much because it is conflating data with UI state.
2. Instead, the treecontrol could expose expandedNodes via a $scope binding. Doing this would allow the consumer to control the expanded state of the control as well as peek at the expanded state if it so desires.

Thoughts?

Do you plan on building drag and drop capabilities into this control?

Nice work on this control. The documentation could probably use a little massaging. I figured out how to expand a node with children on load from one of the issues here on Git ( #14 ), but I'm having no luck pre-selecting the root node (or any node specifically) on page load, or programatically after the fact.

I noticed issue #17 mentions it as a possibility, but I'm new to Angular and not seeing any examples anywhere. Could someone provide one? Would be much appreciated. Thanks.

Is it possible to have an empty folder?

I have a tree with 65000 entries, which is way too large for the "average treeview".

Angular-tree-control however is still snappy - as long es a node do not have too many children:
On latest chrome and good hardware it starts to get sluggish with more than 100 entries and slow with more than 200. Sadly I have some nodes with 1000 children, which brings the browser tab to halt.

Tracking it down with Profiler, it has something to do with eventHandlers, which led me to the idea to try this
http://www.bennadel.com/blog/2448-Using-jQuery-Event-Delegation-In-AngularJS.htm
approach (despite of the jquery dependancy).
This and reducing the template doubled performance! But this is still not enough.

I was trying to dynamically add and remove the treedata, but it doesnt change the problem, that there are up to 1000 children in one folder.

Maybe one could get rid of the attached function nodeExpanded() on treeview element, but I didnt manage to do that ...

I tried in many way but in case of angular 1.0.8 version i simply get data on my page but not in tree view.

In my application i want to change my tree view implementation using angular-tree-control.
we have written huge code using angular 1.0.8 version and right now we don't have any plan to move towards updated angular version and I want this angular-tree-control with my angular 1.0.8 version for faster processing.

so please comment on it

I have implemented a tree that uses a breezejs datasource

I have an data object (SQL Code First) Location

public Guid? Id{ get; set; }
public String Name { get; set; }
public Guid? ParentId { get; set; }
[ForeignKey("ParentId")]
public virtual Location Parent { get; set; }
public virtual ICollection Children { get; set; }

the collection of objects is returned to angular and passed into your tree control. It then renders them correctly for the first level. As soon as I expand the tree I get the following error for each of the child items ( in my case three times)

RangeError: Maximum call stack size exceeded
at Object.toString (native)
at isArray (http://localhost:6229/scripts/angular.js:566:19)
at isArrayLike (http://localhost:6229/scripts/angular.js:259:27)
at forEach (http://localhost:6229/scripts/angular.js:304:16)
at copy (http://localhost:6229/scripts/angular.js:833:7)
at copy (http://localhost:6229/scripts/angular.js:820:23)
at copy (http://localhost:6229/scripts/angular.js:837:28)
at copy (http://localhost:6229/scripts/angular.js:820:23)
at copy (http://localhost:6229/scripts/angular.js:837:28)
at copy (http://localhost:6229/scripts/angular.js:820:23)

The tree worked fine on smaller set of data

I am also using underscore, using underscore solved the issue

a = _.clone(a); a[$scope.options.nodeChildren] = [];
b = _.clone(b); b[$scope.options.nodeChildren] = [];

btw its nice and fast compared to treeview so thanks

The label of my nodes depend upon a property of their parent node and also, the index of the child node within the children array. Is there a way to access these?

I've tried a number of angular based tree views, and this looks by far the most feature complete, with almost everything I need apart from the above.

I want to append and remove a node to tree.

I am using the tree control to display validation messages against a grid of data. The top level node is a brief description and if a user expands the node it shows a more detailed message. If I click on a node I am able to get the selected node via a callback I have tied to on-selection and I can then highlight the cell in my grid that has an error. However I would also like to click on a cell in my grid that has an error and have it highlight the correct node in the tree that corresponds to that error. Currently, we can't set the selected-node to update the currently selected node in the tree. It would be useful to allow a way to set the selected-node for the tree without having to actually click on the tree.

Hi

ATM we cna customize nodes depending if they are expanded/collapsed or a leaf. It is static but sometimes we need the node to decide. To do so I patched angular-tree-control this way:

the template (class no more on li but i directly):

                //tree template
                var template =
                    '<ul '+classIfDefined($scope.options.injectClasses.ul, true)+'>' +
                        '<li ng-repeat="node in node.' + $scope.options.nodeChildren + ' | filter:filterExpression:filterComparator | orderBy:orderBy:reverseOrder" '+classIfDefined($scope.options.injectClasses.li, true)+'>' +
                        '<i class="tree-branch-head" ng-class="headClass(node)" ng-click="selectNodeHead(node)"></i>' +
                        '<i class="tree-leaf-head '+classIfDefined($scope.options.injectClasses.iLeaf, false)+'"></i>' +
                        '<div class="tree-label '+classIfDefined($scope.options.injectClasses.label, false)+'" ng-class="selectedClass()" ng-click="selectNodeLabel(node)" tree-transclude></div>' +
                        '<treeitem ng-if="nodeExpanded()"></treeitem>' +
                        '</li>' +
                        '</ul>';

in $scope.headClass:

                $scope.headClass = function(node) {
                    var liSelectionClass = classIfDefined($scope.options.injectClasses.liSelected, false);
                    var injectSelectionClass = "";
                    if (liSelectionClass && ($scope.options.equality(this.node, $scope.selectedNode)))
                        injectSelectionClass = " " + liSelectionClass;
                    if ($scope.options.iconClass) {
                        return $scope.options.iconClass(node, $scope.options.isLeaf(node), $scope.expandedNodesMap[this.$id]) + injectSelectionClass;
                    }
                    // else defaults
                    if ($scope.options.isLeaf(node))
                        return "tree-leaf" + injectSelectionClass;
                    if ($scope.expandedNodesMap[this.$id])
                        return "tree-expanded" + injectSelectionClass;
                    else
                        return "tree-collapsed" + injectSelectionClass;
                };

Then in my code I just use:

options: {
iconClass: function (node, isALeaf, isExpanded) {
if (isFoo(node)) {
return 'foo';
} else if (isBar(node)) {
return 'bar';
}
return 'default';
}

}

My case is a multi level tree so I need more than is leaf or not.

I've been trying to implement tree-control into my application but i'm getting some strange behavior I haven't been able to figure out.

I get two different things happening randomly. One, if I expend, the tree will expend but the child item names will be blank (icon on side still show up) and I'll get a bunch of errors for that saying "Cannot assign to read only property 'children of'....

Or the tree will expand and look normal but the icon won't switch and i'll get a small error of "undefined is not a function" every time I click an expand node.

This is what I'm getting: http://imgur.com/a/uQE5r

This is the html:

{{node.title}}

And the Ctrl options (I basically have no options set up)
treeOptions: {
defaultExpanded: [0]
}

Is there anything you see here that could explain the errors I'm getting?

I'm finding it very difficult to actually style the tree control itself. In particular, I'm attempting to embed it in a scrollable div. It looks like chrome doesn't recognize the treecontrol tag as it is and is lossing track of it.

Hello,
thanks for this awesome directive.

I am wondering if there is a possibility to add an icon based on a custom type of the node.

My nodes can forexample be "article", "folder", etc.

I think this can easily be implemented by modifying the classIfDefined function, accepting a callback with the node. I will make a pull request for this.

Right now it's only possible to do this statically with:

            injectClasses: {
                iExpanded: "fa fa-folder",
                iCollapsed: "fa fa-folder-open",
                iLeaf: "fa fa-..."
            }

http://docs.angularjs.org/guide/ie says, generally, custom elements are to be avoided, but if they are necessary, there needs to be a document.createElement() call that triggers sufficient magic for IE to die ingloriously when it does happen

The documentation seems to suggest that element content is an available attribute, but I can't seem to get it working, and I don't think the isolated scope inherits the attribute.

I would like to have features such as hover highlighting and additional icons appearing on hover (like a mini menu dropdown). Currently hover highlighting will either highlight the entire

i like to use bootstrap-nav style like this
but there is no way to set special classes for ul/li element :(

Do you plan on building keyboard navigation into this control?

in a tree that nodes are loaded asynchronously (e.g. by clicking on parent node),
every node initially is considered as leaf, as it has no children loaded.
as a workaround, it can be another property like is_parent, to indicate parent nodes from leafs.

I am currently using angular-tree-control inside another directive - a modal dialog which allows users to select from an hierarchical learning domain. My directive has [Cancel] and [Select] buttons, and in each I want to collapse the tree control and unselect any selected node.

Is there any way to do this? I have looked at both the documentation and source code and nothing is immediately apparent.

Is there an easy way or any way to have the tree expanded with selection as in a modify view but yet have the entire tree disabled?

Thanks!

I think there is a problem with the way the tree options are being injected, I specifically had a problem with the injectClasses options, it seems that the attributes are not always on the $scope when ensureDefault() is being called in the controller.

As per http://stackoverflow.com/questions/15151116/angularjs-directives-attributes-access-from-the-controller

The values of the attributes / scope will not be available until the compile phase, so these lines
https://github.com/wix/angular-tree-control/blob/master/angular-tree-control.js#L58 will need to be changed to use a $watch? Or be moved to the later compile function.

Interestingly this problem only occurs with a brand new incognito tab, if you refresh the tab once the page has loaded it all seems to work fine. I guess this is some race condition to do with loading resources for the first time.. not sure.

I have injected my own CSS class to customize the images used for expanded and collapsed nodes, but they seem to get overwritten by the default styles.

My treeOptions:

$scope.treeOptions = {
        nodeChildren: "children",
        dirSelectable: true,
        injectClasses: {
            ul: "a1",
            li: "a2",
            liSelected: "a7",
            iExpanded: "node-minus",
            iCollapsed: "node-plus",
            iLeaf: "a5",
            label: "a6",
            labelSelected: "a8"
        }
    };

My css in question

.node-plus
   background: url("images/plus.png")

.node-minus
   background: url("images/minus.png")

The styles are applied, but then the default styles are applied after. See the attached screenshot from the Chromium developer tools. Am I doing something wrong here?

Just tried to use angular-tree-control with Angular 1.3.0, looks like there's a change which stops the tree working - see angular/angular.js#8876

To get it working I replaced:

    return {
        template: $compile(template)
    }

with:

    this.template = $compile(template)