Check out this demo: . But what do you do when all current nodes are deleted and you need to create the first node?
I've come up with something like this:
<a href="" ng-click="createFirstChapterInput()"><span class="glyphicon glyphicon-circle-arrow-right"></span> New chapter</a>
<div class="row">
<div class="col-lg-12">
<div ui-tree id="tree-root">
<ol ui-tree-nodes ng-model="chapters">
<li ng-repeat="chapter in chapters" ui-tree-node ng-include="'nodes_renderer'"></li>
</ol>
</div>
</div>
The 'nodes_renderer' is a template extracted from the demo. It's too lengthy to include here. In simple terms, it should take this template and compile it as a function.
Below is the createFirstChapterInput function:
$scope.createFirstChapterInput = function() {
$scope.chapter = {};
Restangular.copy({route: Chapters.url}, $scope.chapter);
$scope.chapter['name'] = null;
var result = $('<li>' + $('#nodes_renderer').html() + '</li>');
$('#tree-root').find('ol').prepend(result);
$compile(result)($scope);
result.find('input.new').focus();
}
However, an error occurs:
Controller 'uiTreeNode', required by directive 'uiTreeHandle', can't be found!
I'm unsure how to pass this controller to the scope so that the compiler recognizes it. Is there a better solution for this issue?