Inserisci direttiva programmaticamente angolare

Question

Quindi sostanzialmente voglio essere in grado di attivare un evento e quindi avere una direttiva compilare e inserirmi in una posizione nel DOM. Attualmente ho qualcosa di simile

//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'); 
     } 
    }; 
    }); 

sono in grado di vedere l'oggetto "el" con tutto quello che ho bisogno, ma io non sono in grado di inserirlo nel DOM ... qualche indizio?

Answer 1

È necessario creare prima l'elemento dom, quindi compilarlo e aggiungerlo al documento. Qualcosa di simile a questo:

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

ho creato un semplice esempio qui: http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview