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

如何在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/


慕沐林林
浏览 922回答 3
3回答

慕桂英3389331

你有很多毫无意义的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;};});你会注意到我也重构了你的指令,以便遵循一些最佳实践。如果您对这些问题有任何疑问,请与我们联系。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

AngularJS