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. 使用setTimeout（）改變每秒obj.id的模型，改變了{{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) {