<script type="text/ng-template" id="nodes_renderer1.html"><div ui-tree-handle class="tree-node tree-node-content"><!-- 下拉按钮 --><a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a><!-- 文本 -->{{node.title}}<!-- 删除按钮 --><a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a><!-- 新增按钮 --><a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a></div><!-- 拖拽的时候的虚线框 --><ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}"><!-- 递归调用 --><li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer1.html'"></li></ol>
</script>

<div class="col-sm-6"><h3>Tree 1</h3><div ui-tree id="tree1-root"><!-- 整个树div --><ol ui-tree-nodes="" ng-model="tree1"><!-- 调用模板 --><li ng-repeat="node in tree1" ui-tree-node ng-include="'nodes_renderer1.html'"></li></ol></div>
</div>

angular.module('demoApp').controller('ConnectedTreesCtrl', ['$scope', function($scope) {//移除这个节点（以及子节点），scope即此节点$scope.remove = function(scope) {scope.remove();};//展开此节点$scope.toggle = function(scope) {scope.toggle();};//给这个节点新增子节点$scope.newSubItem = function(scope) {var nodeData = scope.$modelValue;nodeData.nodes.push({id: nodeData.id * 10 + nodeData.nodes.length,title: nodeData.title + '.' + (nodeData.nodes.length + 1),nodes: []});};}]);