Перехода к дочернему узлу в угловом (как Проводник Windows)

Question

У меня есть объект с этой структурой

{ 
    Name: 'A', 
    CreatedOn: new Date(), 
    Directories: [ 
     { 
     Name: 'A.1', 
     CreatedOn: new Date(), 
     Directories: [] 
     }, 
     { 
     Name: 'A.2', 
     CreatedOn: new Date(), 
     Directories: [ 
      { 
      Name: 'A.2.1', 
      CreatedOn: new Date(), 
      Directories: [] 
      } 
     ] 
     } 
    ] 
} 

и я хочу создать директиву для навигации от «А» до «А.1», а затем манипулировать " A.1 "как дата изменения, тогда перейдите к" A.2 ".. Так что, в основном, моя идея - передать сам объект, если на что указывает текущая директива. например, у меня есть метод, который говорит NavigateTo (scope, currentValue), где currentValue является узлом в иерархии. Другая идея состоит в том, чтобы воссоздать директиву и передать ей узел, тогда предыдущий узел будет сохранен в некотором массиве.

Моя проблема сейчас, так как мой dom имеет привязку ng-model Переменная на этой области также изменит, что также разрушит мой объект иерархии. Любые указания по созданию этой директивы? Любая помощь будет оценена по достоинству. Я создал скрипку для игры.

CLICK HERE

Answer 1

Это не совсем ясно, какую помощь вы просите помощи т.е. с исправления ошибок в коде или идеи для возможного алгоритма ....?

Директивы не предназначены для управления вашей моделью/областью, они используются для управления DOM, поэтому то, что вы хотите сделать, это построить свою функцию в вашем контроллере, а затем создать директиву, способную рекурсивно перемещаться по модели и рендеринг его в DOM.

Смотрите эту скрипку, чтобы вы начали http://jsfiddle.net/ObiOne86/e478n2pc/4/

UPDATE

Я думаю, что вы хотите достичь может быть достигнута с помощью простого шаблона вместо того, чтобы беспокоиться о нюансах с помощью директив , Пожалуйста, смотрите этот новый Fiddle для рабочего примера, который соответствует вашим целям

 var app = angular.module('TempExplorer', []); 
app.controller("TempExplorerCtrl", ["$scope", function ($scope) { 

    $scope.Directory = [new Directory('My Documents')]; 
    $scope.CurrentPath = {}; 
    $scope.selectPath = function (path) { 
     $scope.CurrentPath = path; 
    } 
}]); 

function Directory(name) { 
    var self = this; 
    self.Name = name; 
    self.CreatedOn = new Date(); 
    self.Directories = []; 

    self.AddChild = function (childName) { 
     self.Directories.push(new Directory(childName)); 
    } 
} 

HTML

<div ng-app="TempExplorer"> 
    <script id="tempTemplate.html" type="text/ng-template"> 
     <div> Dir: {{dir.Name}} <br /> <button ng-click="dir.AddChild('A Child')"> Add Child </button> 
     <button ng-click="selectPath(dir)">Select Me</button></div> 
     <div class="subdir" ng-repeat="dir in dir.Directories" ng-include="'tempTemplate.html'"></div> 
    </script> 
    <div ng-controller="TempExplorerCtrl">Rename: 
     <input ng-model="CurrentPath.Name" /> 
     <div ng-repeat="dir in Directory" ng-include="'tempTemplate.html'"></div> 
    </div> 
</div> 

Некоторые CSS сахар

.subdir { 
    margin-left : 30px; 
} 

Answer 2

Обновленный код в jsfiddle. Он может обеспечить ваши требования. Возможно, нет.

Я удалил $scope.CurrentPath.Directories = []; эту строку, если вам нужна эта строка, которую вы можете добавить в свой блок. В противном случае нажмите кнопку «Push», не удаляя.