创建角树中的第一个节点

Question

这里是演示：https://jimliu.github.io/angular-ui-tree/但是当你删除所有当前节点并且你想创建第一个节点时情况如何？

到目前为止，我有这样的事情：

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

的nodes_renderer是一个模板，从演示究竟采取。在这里粘贴它太长了。一般来说 - 它应该采用这个模板并在函数中进行编译。

这里是createFirstChapterInput功能：

$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(); 
    } 

但很好，它的错误结束：

控制器 'uiTreeNode'，由指令所要求的 'uiTreeHandle'，不能 被发现！

我不知道如何将这个控制器传递给范围，所以编译会看到它。此外，我不确定代码是否适用于此，还是有更好的解决方案。

Answer 1

您遇到问题是因为您不是“在角度思考”。 这个SO question and answer是一个很好的开始。简而言之，您不会在Angular的控制器中对DOM元素进行推理 - 相反，请考虑模型并创建它。

您要添加的第一个项目 - 将其添加到模型chapters和角度会使视图反映了你如何绑定它的模式 - 在这种情况下，angular-ui-tree：

$scope.createFirstChapterInput = function() { 
    var firstChapter = {name: "whatever"}; 
    $scope.chapters.push(firstChapter); 
}