Создание самого первого узла в угловом дереве

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 шаблон, взятая именно из демки. Это слишком долго, чтобы вставить его здесь. Вообще говоря - это shouse принять этот шаблон и скомпилировать его в функции.

Вот функция 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 - хорошее место для начала.

В двух словах вы не рассуждаете с точки зрения элементов DOM в контроллерах Angular, вместо этого подумайте о модели и создайте ее.

Вы хотите добавить самую первый элемент - добавить его к модели chapters и Угловые бы сделать вид отражает вашу модель с тем, как вы обвили его - в этом случае, с angular-ui-tree:

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