Migrate From v1.x to v2.0

We made a lot of changes on v2.0, so if you want to upgrade v1.x to v2.0, something you have to do:

HTML Template Changes

• Add ui-tree to the root of the tree
• Rename ui-nested-sortable to ui-tree-nodes
• Rename ui-nested-sortable-item to ui-tree-node
• Rename ui-nested-sortable-handle to ui-tree-handle

For example:

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

Changes to

<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>

Callbacks changes

Callbacks is passed through the directive ui-tree now. 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>

Accept()

Removed the first argument modelData, using sourceNodeScope.$modelValue can get the model data.

V1.x:

accept: function(modelData, sourceItemScope, targetScope, destIndex) {
  return true;
},

V2.0

callbacks.accept = function(sourceNodeScope, destNodesScope, destIndex) {
  if (destNodesScope.nodrop || destNodesScope.outOfDepth(sourceNodeScope)) {
    return false;
  }
  return true;
};

itemRemoved, itemAdded, itemMoved, orderChanged and itemClicked

These functions had been merged to callbacks.dropped.

callbacks.dropped = function(event) {
};

• Using event.dest.nodesScope to get which nodes had been added node.
• Using event.source.nodesScope to get which nodes have been removed node.
• Using event.dest.nodesScope.isParent(event.source.nodeScope) to check if it moves in same parent node
• Using event.source.index to get the index before it was dragged.

start, move, stop

These 3 functions had been changed to dragStart, dragMove and dragStop.

V1.x

callbacks.start = function(scope, modelData, elements) {
};
callbacks.move = function(scope, modelData, elements) {
}
callbacks.stop = function(scope, modelData, elements) {
}

V2.0

callbacks.dragStart = function(event) {
};
callbacks.dragMove = function(event) {
}
callbacks.dragStop = function(event) {
}