2013-05-20 33 views
37

Eklemek için temel olarak bir olayı tetikleyebilmeyi ve daha sonra bir yönergenin derlenmesini ve kendisinin DOM'daki bir konuma yerleştirilmesini istiyorum. Şu ... herhangi ipuçları ben ihtiyacım olan tüm nesne "el" görmek mümkün duyuyorum buYönergeyi programsal olarak açısal

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

gibi bir şey var ama DOM içine eklemek mümkün değilim?

+0

[Dinamik angularjs içinde yönergesini ekleyin] Olası yinelenen (http://stackoverflow.com/questions/15279244/dynamically-add -yarısal-in-angularjs) –

cevap

46

Önce dom öğesini oluşturmanız, sonra derlemeniz ve belgeye eklemeniz gerekir. Böyle bir şey: Burada basit bir örnek oluşturduk

$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

+4

Angular dışında eleman yaratıyor olsaydım '$ compile' a nasıl erişebilirim? – Hengjie

+0

Merhaba, programlı olarak yönergeleri daha basit bir işlem yapmak için yeni önerilen API'm hakkında fikir verir misiniz? https://github.com/angular/angular.js/issues/6950 Teşekkürler! – trusktr

+1

@Hengjie Öğeyi belirli bir kapsamı referans alarak derlemeliyiz (köşeli). Açısal dışında direktifler yoktur. Direktifler uygulamanızdaki kapsamlara bağlıdır. Alternatif olarak jQLite'i açısal ve içtenlikli işleyicileri bu yolla kullanabilirsiniz ('angular.element ('body')'). –

İlgili konular