如何在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(&nbsp;'test',&nbsp;function&nbsp;(&nbsp;$compile&nbsp;)&nbsp;{ &nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;'E', &nbsp;&nbsp;&nbsp;&nbsp;scope:&nbsp;{&nbsp;text:&nbsp;'@'&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;template:&nbsp;'<p&nbsp;ng-click="add()">{{text}}</p>', &nbsp;&nbsp;&nbsp;&nbsp;controller:&nbsp;function&nbsp;(&nbsp;$scope,&nbsp;$element&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.add&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;el&nbsp;=&nbsp;$compile(&nbsp;"<test&nbsp;text='n'></test>"&nbsp;)(&nbsp;$scope&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$element.parent().append(&nbsp;el&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;};});你会注意到我也重构了你的指令，以便遵循一些最佳实践。如果您对这些问题有任何疑问，请与我们联系。