Question

这是demo：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();
    }

但是，它最终会出错：

指令'uiTreeHandle'所需的控制器'uiTreeNode'不能被发现了！

我不知道如何将此控制器传递给作用域，因此编译会看到它。此外，我不确定代码是否适用于此或是否有更好的解决方案。

Answer 1

你遇到了问题，因为你不是在思考Angular＆＃34;。这个SO question and answer是一个很好的起点。

简而言之，您不会在Angular控制器中使用DOM元素进行推理 - 而是考虑模型并创建它。

您想要添加第一个项目 - 将其添加到模型chapters，Angular会使视图反映您的模型以及如何绑定它 - 在本例中，使用angular-ui-tree：< / p>

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

在角树中创建第一个节点

1 个答案: