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

Question

如何在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>");             });         }     };});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 );
      };
    }
  };});

你会注意到我也重构了你的指令，以便遵循一些最佳实践。如果您对这些问题有任何疑问，请与我们联系。