Вставить директиву программно угловую

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