Chèn chỉ thị theo chương trình góc

Question

Vì vậy, về cơ bản tôi muốn có thể kích hoạt một sự kiện và sau đó có một biên dịch chỉ thị và chèn tự của nó vào một vị trí trong DOM. Hiện nay tôi có một cái gì đó như thế này

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

tôi có thể thấy đối tượng "el" với tất cả những gì tôi cần, nhưng tôi không thể để chèn nó vào DOM ... bất kỳ manh mối?

Answer 1

Trước tiên bạn phải tạo phần tử dom, sau đó biên dịch nó và thêm nó vào tài liệu. Một cái gì đó như thế này:

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

tôi đã tạo ra một ví dụ đơn giản ở đây: http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview