以编程方式插入指令角

所以，我基本上希望能够触发一个事件，然后有一个指令编译并将其自身插入DOM中的位置。目前，我有这样的事情以编程方式插入指令角

//controller 
    angular.module('app').controller('MainCtrl', function ($scope, $compile) { 

    $scope.$on('insertItem',function(ev,attrs){ 
     var el = $compile("<chart></chart>")($scope); 
     $scope.insertHere = el; 
    }); 

    }); 


// directive 
angular.module('app') 
    .directive('chart', function() { 
    return { 
     template: '<div>My chart</div>', 
     restrict: 'E', 
     link: function postLink(scope, element, attrs) { 
     element.text('this is a chart'); 
     } 
    }; 
    });

我能看到物体“厄尔尼诺”与一切，我需要，但我不能将它插入到DOM ... 任何线索？

来源

2013-05-20 climboid

的[动态在AngularJS添加指令]可能的复制（http://stackoverflow.com/questions/15279244/dynamically-add -directive-in-angularjs） –

您必须先创建dom元素，然后编译它并将其添加到文档中。事情是这样的：

$scope.$on('insertItem',function(ev,attrs){ 
    var chart = angular.element(document.createElement('chart')); 
    var el = $compile(chart)($scope); 

    //where do you want to place the new element? 
    angular.element(document.body).append(chart); 

    $scope.insertHere = el; 
};

我已经在这里创造一个简单的例子：http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview

来源

2013-05-20 19:45:47 joakimbl

如果我在Angular之外创建元素，我将如何访问'$ compile'？ – Hengjie

您好，请您提供一些关于我的新建议的API的建议，以便通过编程方式将指令添加到一个更简单的过程中？ https://github.com/angular/angular.js/issues/6950谢谢！ – trusktr

@Hengjie它需要参考特定范围（内部角度）来编译元素。角度之外没有指令。指令与你的应用中的范围相关联。或者，您可以在角度内使用jQLite，并以这种方式执行事件处理程序（'angular.element（'body'）'）。 –

以编程方式插入指令角

回答

相关问题