动态添加没有模板的指令

Question

以下是如何动态添加ng-click指令的方法。让我们说我想做同样的事情，但我不想使用模板。我想在当前元素中添加ng-click。我怎么能这样做？

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

这与this post基本上是同一个问题，但我想在不使用模板的情况下完成