Wstaw dyrektywnie programowo kątowo

Question

Więc zasadniczo chcę móc wywołać zdarzenie, a następnie mieć dyrektywę skompilować i wstawić swoje ja do pozycji w DOM. Obecnie mam coś takiego

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

jestem w stanie zobaczyć obiekt „EL” ze wszystkim, co potrzebne, ale nie jestem w stanie go wstawić do DOM ... żadnych wskazówek?

Answer 1

Najpierw należy utworzyć element dom, a następnie skompilować go i dodać do dokumentu. Coś takiego:

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

stworzyłem prosty przykład tutaj: http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview