以编程方式插入指令angular度

所以我基本上希望能够触发一个事件，然后有一个指令编译，并将其自我插入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'); } }; }); 

我能够看到所有我需要的对象“el”，但是我无法将其插入DOM …任何线索？

Answer 1

您必须先创builddom元素，然后编译它并将其添加到文档中。 像这样的东西：

 $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; }; 

我在这里创build了一个简单的示例： http : //plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview