[解決済み】AngularJSでディレクティブを動的に追加するにはどうすればよいですか？

質問

私がやっていることは、非常に煮詰まったものですが、問題は伝わっています。

私は、シンプルな directive . 要素をクリックするたびに、別の要素が追加されます。しかし、それを正しくレンダリングするためには、最初にコンパイルする必要があります。

研究の結果、私は $compile . しかし、どの例も複雑な構造を使っていて、ここでどう適用したらいいのかよくわからないのです。

フィドルはこちら http://jsfiddle.net/paulocoelho/fBjbP/1/

そして、JSはこちらです。

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '<p>{{text}}</p>',
        scope: {
            text: '@text'
        },
        link:function(scope,element){
            $( element ).click(function(){
                // TODO: This does not do what it's supposed to :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

解答者：ジョシュ・デイヴィッド・ミラー http://jsfiddle.net/paulocoelho/fBjbP/2/

どのように解決するのか？

無意味なjQueryがたくさん入っていますが、$compileサービスは、実は スーパーシンプル この場合

.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">{{text}}</p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

ベストプラクティスに従うために、ディレクティブもリファクタリングしたことにお気づきでしょう。 これらのことについて質問があれば、私に知らせてください。