以编程方式插入指令AngularJS

所以我基本上希望能够触发一个事件，然后有一个指令编译并将其自身插入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');
      }
    };
  });

//控制器
角度.module（'app'）.controller（'MainCtrl'，function（$scope，$compile）{
$scope.$on（'insertItem'，函数（ev，attrs）{
变量el=$compile（“”）（$scope）；
$scope.insertHere=el；
});
});
//指示
角度。模块（'app'）
.directive（'chart'，function（）{
返回{
模板：“我的图表”，
限制：'E'，
链接：函数postLink（范围、元素、属性）{
text（“这是一个图表”）；
}
};
});

我可以看到对象“el”以及我需要的所有内容，但我无法将其插入DOM。。。

---

有什么线索吗？

您必须首先创建dom元素，然后编译它并将其添加到文档中。大概是这样的：

$scope.$on（'insertItem'，函数（ev，attrs）{
var chart=angular.element（document.createElement（'chart'））；
var el=$compile（图表）（$scope）；
//要将新元素放置在何处？
元素（文档.正文）.append（图表）；
$scope.insertHere=el；
};

---

我在这里创建了一个简单的示例：

如果我在Angular之外创建元素，我将如何访问

$compile

？您好，请提供我新提议的API的想法，以使以编程方式添加指令的过程更简单？谢谢！@Hengjie它需要根据特定范围编译元素（内部angular）。angular之外没有任何指令。指令绑定到应用程序内的作用域。或者，您可以在angular内部使用jQLite，并以这种方式执行事件处理程序（

angular.element（'body'）

）。这是一种正常的做法，还是与角度纹理相对应？它肯定会让人觉得这是与角度方式相对应的，尽管另一种方式并不更漂亮。我基本上是根据事件惰性地触发

ng include

，让

ng include

为我处理编译和链接。如果有人感兴趣，我可以把代码加起来作为答案。可能是重复的