所以我基本上希望能够触发一个事件,然后编译一个指令并将其自身插入到 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');
}
};
});
我能够看到对象“el”以及我需要的所有内容,但我无法将其插入到 DOM 中... 有什么线索吗?
最佳答案
您必须首先创建 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
关于angularjs - 以编程方式插入指令 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16656735/