Angular UI Tree Rails

Angular UI Tree is an AngularJS UI component that can sort nested lists, provides drag & drop support and doesn't depend on jQuery. If you are a user who uses angular-nestedSortable, this is How to migrate From v1.x to v2.0.

• Uses the native AngularJS scope for data binding
• Sorted and move items through the entire tree
• Prevent elements from accepting child nodes

The Angular UI Tree is tested with the following browsers:

• Chrome (stable)
• Firefox
• IE 8, 9 and 10

For IE8 support, make sure you do the following:

• include an ES5 shim
• make your AngularJS application compatible with Internet Explorer
• use jQuery 1.x

Add this line to your application's Gemfile:

gem 'angular_ui_tree_rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install angular_ui_tree_rails

You will need to add the angular-ui-tree object in your application.js:

//= require angular-ui-tree

You will need to add the angular-ui-tree object in your application.scss:

*= require angular-ui-tree

Watch the Tree component in action on the demo page.

Add the sortable module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.tree'])

Injecting ui.tree, ui-tree-nodes, ui-tree-node, ui-tree-handle to your html.

<div ui-tree>
  <ol ui-tree-nodes="" ng-model="list">
    <li ng-repeat="item in list" ui-tree-node>
      <div ui-tree-handle>
        {{item.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="item.items">
        <li ng-repeat="subItem in item.items" ui-tree-node>
          <div ui-tree-handle>
            {{subItem.title}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>

Developing Notes:

• Adding ui-tree to your root element of the tree.
• Adding ui-tree-nodes to the elements which contain the nodes. ng-model is required, and it should be an array, so that the directive knows which model to bind and update.
• Adding ui-tree-node to your node element, it always follows the ng-repeat attribute.
• Adding ui-tree-handle to the element used to drag the object.
• All ui-tree, ui-tree-nodes, ng-model, ui-tree-node are necessary. And they can be nested.
• If you don't add a ui-tree-handle for a node, the entire node can be dragged.

<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
  <div ui-tree-handle>
    {{node.title}}
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes">
    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
    </li>
  </ol>
</script>
<div ui-tree>
  <ol ui-tree-nodes="" ng-model="data" id="tree-root">
    <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
  </ol>
</div>

ui-tree                             --> Root of tree
  ui-tree-nodes                     --> Container of nodes
    ui-tree-node                    --> One of the node of a tree
      ui-tree-handle                --> Handle
      ui-tree-nodes                 --> Container of child-nodes
        ui-tree-node                --> Child node
          ui-tree-handle            --> Handle
        ui-tree-node                --> Child node
    ui-tree-node                    --> Another node
      ui-tree-handle                --> Handle

Migrate From v1.x to v2.0

ui-tree is the root scope for a tree

Turn on dragging and dropping of nodes.

• true (default): allow drag and drop
• false: turn off drag and drop

Number of levels a nodes can be nested (default 0). 0 means no limit. Note If you write your own $callbacks.accept method, you have to check data-max-depth by yourself.

Number of milliseconds a click must be held to start a drag. (default 0)

If a tree is empty, there will be an empty place hoder which is used to drop node from other trees by default.

• true (default): display an empty place holder if the tree is empty
• false: do not display an empty place hoder

• turn on/off drag and drop.
• Limit depth to 5
• 500 milliseconds delay

<div ui-tree data-drag-enabled="tree.enabled" data-max-depth="5" data-drag-delay="500">

</div>

Collapse all it's child nodes.

Expand all it's child nodes.

$callbacks is a very important property for angular-ui-tree. When some special events trigger, the functions in $callbacks are called. The callbacks can be passed through the directive. Example:

myAppModule.controller('MyController', function($scope) {
  $scope.treeOptions = {
    accept: function(sourceNodeScope, destNodesScope, destIndex) {
      return true;
    },
  };
});

<div ui-tree="treeOptions">
  <ol ui-tree-nodes ng-model="nodes">
    <li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li>
  </ol>
</div>

Check if the current dragging node can be dropped in the ui-tree-nodes.

Parameters:

• sourceNodeScope: The scope of source node which is dragging.
• destNodesScope: The scope of ui-tree-nodes which you want to drop in.
• destIndex: The position you want to drop in.

Return If the nodes accept the current dragging node.

• true Allow it to drop.
• false Not allow.

Check if the current selected node can be dragged.

Parameters:

• sourceNodeScope: The scope of source node which is selected.

Return If current node is draggable.

• true Allow it to drag.
• false Not allow.

If a node moves it's position after dropped, the nodeDropped callback will be called.

Parameters:

• event: Event arguments, it's an object.
  • source: Source object
    • nodeScope: The scope of source node which was dragged.
    • nodesScope: The scope of the parent nodes of source node when it began to drag.
    • index: The position when it began to drag.
  • dest: Destination object
    • nodesScope: The scope of ui-tree-nodes which you just dropped in.
    • index: The position you dropped in.
  • elements: The dragging relative elements.
    • placeholder: The placeholder element.
    • dragging: The dragging element.
  • pos: Position object.

The dragStart function is called when the user starts to drag the node. Parameters: Same as Parameters of dropped.

The dragMove function is called when the user moves the node.

Parameters: Same as Parameters of dropped.

The dragStop function is called when the user stop dragging the node.

Parameters: Same as Parameters of dropped.

The beforeDrop function is called before the dragging node is dropped.

Parameters: Same as Parameters of dropped.

ui-tree-nodes is the container of nodes. Every ui-tree-node should have a ui-tree-nodes as it's container, a ui-tree-nodes can have multiple child nodes.

Turn off drop of nodes.

Number of levels a nodes can be nested (default 0). 0 means no limit. It can override the data-max-depth in ui-tree. Note If you write your own $callbacks.accept method, you have to check data-nodrop and data-max-depth by yourself.

Example: turn off drop.

<ol ui-tree-nodes ng-model="nodes" data-nodrop>
  <li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li>
</ol>

The html element which bind with the ui-tree-nodes scope.

The data which bind with the scope.

All it's child nodes. The type of child node is scope of ui-tree-node.

The scope of node which current ui-tree-nodes belongs to. For example:

ui-tree-nodes                       --> nodes 1
  ui-tree-node                      --> node 1.1
    ui-tree-nodes                   --> nodes 1.1
      ui-tree-node                  --> node 1.1.1
      ui-tree-node                  --> node 1.1.2
  ui-tree-node                      --> node 1.2

The property $nodeScope of nodes 1.1 is node 1.1. The property $nodes of nodes 1.1 is [node 1.1.1, node 1.1.2]

Number of levels a node can be nested. It bases on the attribute data-max-depth.

Turn off drop on nodes. It bases on the attribute data-nodrag.

Get the depth.

Check if depth limit has reached

Check if the nodes is the parent of the target node. Parameters:

• nodeScope: The target node which is used to check with the current nodes.

A node of a tree. Every ui-tree-node should have a ui-tree-nodes as it's container.

Turn off drag of node. Example: turn off drag.

<ol ui-tree-nodes ng-model="nodes">
  <li ng-repeat="node in nodes" ui-tree-node data-nodrag>{{node.title}}</li>
</ol>

Collapse the node.

The html element which bind with the ui-tree-nodes scope.

The data which bind with the scope.

If the node is collapsed

• true: Current node is collapsed;
• false: Current node is expanded.

The scope of parent node.

The scope of it's ui-tree-nodes.

The scope of it's parent ui-tree-nodes.

For example:

ui-tree-nodes                       --> nodes 1
  ui-tree-node                      --> node 1.1
    ui-tree-nodes                   --> nodes 1.1
      ui-tree-node                  --> node 1.1.1
      ui-tree-node                  --> node 1.1.2
  ui-tree-node                      --> node 1.2

• node 1.1.1.$parentNodeScope is node 1.1.
• node 1.1.$childNodesScope is nodes 1.1.
• node 1.1.$parentNodesScope is nodes 1.

Collapse current node.

Expand current node.

Toggle current node.

Remove current node.

Get the depth of the node.

Get the max depth of all the child nodes. If there is no child nodes, return 0.

Check if the current node is sibling with the target node. Parameters:

• targetNodeScope: The target node which is used to check with the current node.

Check if the current node is a child of the target node. Parameters:

• targetNodeScope: The target node which is used to check with the current node.

Use the ui-tree-handle to specify an element used to drag the object. If you don't add a ui-tree-handle for a node, the entire node can be dragged.

Give them a like on ngmodules

1. Fork it ( https://github.com/[my-github-username]/angular_ui_tree_rails/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request