既存のテンプレートに追加するテンプレートを作成する - AngularJS

Question

AngularJSでは、既存のテンプレートを置き換えるのではなく、データが変更されたときに同じテンプレートに追加するテンプレートを使用したいという状況に遭遇しました。

<my-template data="myData"></my-template> 

template.htmlは同様のものとすることができます：指令はこのようなものにすることができます

<p>ID: {{data.id}}, Name: {{data.name}}</p> 

データが単一のデータが含まれていますので、私はデータを変更するとき、私はそれを置き換えるのではなく、追加するテンプレートの上にします。だから、出力は次のようになります。

ID：1、名前：ジョン・

ID：2、名：Michael

ID：3、名称：アブラハム

は私も扱うようにしたいですユーザーが上記の任意の名前をタップしたときにonClick。

どうすればこの問題を解決できますか？

Answer 1

よろしいですか？この

  angular.module('myApp', []) 
    .controller('myController', function($scope, $interval) { 
     var count = 0; 
     var addPerson = function() { 
      count++ 
      $scope.person = { 
       name: 'person' + count, 
       age: 20 + count 
      }; 

     }; 

     var timer = $interval(addPerson, 1000); 
    }) 

    .directive('myDirective', function($compile) { 
     return { 
      restrict: "A", 
      transclude: true, 
      scope: "=", 
      link: function(scope, element, attrs) { 


      scope.handleClick = function(event) { 

       console.log(event.target.innerText) 

      } 

      scope.$watch(function() { 
       return scope.person; 
      }, function(obj) { 

       var elementToRender = angular.element('<div ng-click="handleClick($event)">' + obj.name + '</div>'); 

       function renderDiv() { 


        return elementToRender 
       } 

       element.append(renderDiv()); 
       $compile(elementToRender)(scope); 
      }, false); 


     } 
    }; 
}); 

テンプレート

<div ng-app="myApp" ng-controller="myController"> 
<div my-directive data="{{person}}"></div> 
</div>