javascript - 在 Angular 树中创建第一个节点

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

但是，它以错误结束:

Controller 'uiTreeNode', required by directive 'uiTreeHandle', can't be found!

我不知道如何将此 Controller 传递给作用域以便编译时能看到它。另外我不确定代码是否适合这个或者是否有更好的解决方案。

Answer 1

您遇到问题是因为您没有“用 Angular 思考”。这SO question and answer是一个很好的起点。

简而言之，您无需根据 Angular Controller 中的 DOM 元素进行推理 - 相反，请考虑并创建模型。

你想添加第一个项目 - 将它添加到模型 chapters 中，Angular 将使 View 反射(reflect)你的模型以及你如何绑定(bind)它 - 在这种情况下，使用 angular -ui-树:

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