プログラムでディレクティブを挿入する

Question

基本的にはイベントをトリガしてから、ディレクティブをコンパイルして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に挿入することはできませんよ？

Answer 1

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