如何在插入DOM（angularjs）时重新编译指令

Question

好的，所以我创建了一个指令，让我们说

<calendar></calendar>

它按照我的预期呈现，所以一切正常。现在，我的问题是如何在插入DOM时（重新）渲染它？我不想一直在我的页面上使用它，我只想动态添加它并在我需要它时呈现（它是模块的一部分），让我们说，理想情况下我希望它看起来像

$("body").append("<calendar></calendar>")

如何使用angularjs实现这一目标？

Answer 1

你需要在下面两行写下你想要将指令元素注入DOM的地方，不要忘记添加$document＆amp; <{1}}依赖于您使用它的任何地方。

$compile

Answer 2

可以使用角度元素来实现：

angular.element('body').append($compile("<calendar></calendar>")($scope));

Answer 3

行动的顺序如下：

1. 创建DOM元素或angular.element对象：

   var calendar = angular.element('<calendar></calendar>'),
   

2. 将其传递给$compile服务。在此阶段，您需要提供必要的范围对象：

   $compile(calendar)(scope);
   

3. 将calendar元素附加到文档：

   angular.element('body').append(calendar);
   

所以一起看起来像：

var calendar = angular.element('<calendar></calendar>');
$compile(calendar)(scope);
angular.element('body').append(calendar);

Answer 4

您可以使用$ compile服务重新编译它并使用angular.element（＆＃39; body＆＃39;）。append将它再次附加到页面。 E.g：

    var el = $compile( "<calendar></calendar>" )( $scope );
    angular.element('body').append( el );