AngularJS: объект модели дерева с использованием динамического шаблона директивы

Question

Я хочу перемещать объект модели дерева.

Но каждое вспомогательное дерево имеет разную структуру и добавляет ребенка каждые 1 секунду.

я писал:

my code : jsfiddle

HTML ::

<div ng-app="myApp"> 
    <div ng-controller="MainCtrl"> 
     <input type="button" ng-click="init()" value="init"/> 
     {{obj}} 
     <hr /> 
     obj:: 
     <example obj="obj"></example> 
     <hr /> 
     obj1:: 
     <example obj="obj1"></example> 
     <hr /> 
     obj1.id:: 
     {{obj1.id|json}} 
    </div> 
</div> 

Javascript ::

var app = angular.module('myApp', []); 
app.directive('example', function() { 
    return { 
     restrict:"E", 
     trunslate: true, 
     scope:{ 
      obj:'=' 
     }, 
     controller:function($scope, $element, $attrs){ 
      $scope.$watch($attrs.obj, function(value) { 
       var template = "<ol>"; // dynamic template 
       console.log("OBJ :: "); 
       f = value; 
       console.log($scope.obj); 
       angular.forEach($scope.obj, function(value,field){ 
        if(angular.isArray(value)){ 
         template += '<li>'+field; 
         template += ' <div ng-repeat="sobj in obj.' + field + '">'; 
         template += '  <example obj="sobj"></example>'; 
         template += ' </div>'; 
         template += '</li>'; 
        }else{ 
         template += '<li>' + field + "::" + value + "</li>";  
        } 
       }); 
       template += "</ol>"; 
       $element.replaceWith($element.html(template)); 
      }); 
     } 
    }; 
}) 
app.controller('MainCtrl', function ($scope) { 
    $scope.obj = { 
     ifdsfds:5, 
     fdsafds:'Nfdsafdase 1', 
     subobj:[{ 
      id: 1, 
      val: 'hi' 
     }] 
    }; 
    $scope.obj1 = { 
     id:5, 
     fdsafds:'Nfdsafdase 1' 
    }; 
    $scope.init = function(){ 
     $scope.obj = { 
      id: 1, 
      title: 'Nofdsafdste 61' 
     } 
    }; 
    $scope.counter = 0; 
    $scope.ajax = function(){ 
     var number = Math.round(Math.random()*100); 

     $scope.obj1.id = number; 
     //if($scope.counter++ < 10){ 
     setTimeout(function(){ 
      $scope.ajax(); 
      $scope.$apply(); 
     }, 3000); 
     //} 
     console.log($scope.counter + " = " + number); 
    }; 
    $scope.ajax(); 
}); 

проблемы:

1. изменение модели obj.id в секунду с использованием setTimeout(). Работа {{obj.id}} изменена. Но не меняя модель obj, переданную директиве.
2. не работает рекурсивная директива.
3. я хочу не с помощью поля шаблона

Answer 1

Вы должны добавить Бодрствующие в функции связи вместо функции контроллера и заменить $ attrs.watch простой часы

заменить

controller:function($scope, $element, $attrs){ 
      $scope.$watch($attrs.obj, function(value) { 

с - -

link:function($scope, $element, $attrs){ 
      $scope.$watch('obj', function(value) {