如何在AngularJS中动态添加指令？

Question

我正在做的事情非常精简，可以解决问题。

我有一个简单的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>");
            });
        }
    };
});

Josh David Miller的解决方案：http :
//jsfiddle.net/paulocoelho/fBjbP/2/

Answer 1

那里有很多毫无意义的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 );
      };
    }
  };
});

您会注意到，我也重构了您的指令，以便遵循一些最佳实践。如果您有任何疑问，请告诉我。