Insert-Anweisung programmatisch Winkel

Question

Also ich möchte im Grunde in der Lage sein, ein Ereignis auszulösen und dann eine Direktive kompilieren und seine selbst an einer Position im DOM einfügen. Zur Zeit habe ich so etwas wie diese

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

ich in der Lage bin mit all das Objekt „el“, um zu sehen, die ich brauche, aber ich bin nicht in der Lage in den DOM ... irgendwelche Hinweise einfügen?

Answer 1

Sie müssen zunächst das dom-Element erstellen, dann kompilieren und zum Dokument hinzufügen. Etwas wie folgt aus:

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

ich ein einfaches Beispiel hier erstellt haben: http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview