如何在插入 DOM (angularjs) 时重新编译指令

Question

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

<calendar></calendar>

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

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

如何使用 angularjs 实现此目的？

Answer 1

操作顺序是这样的：

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 2

您可以使用 $compile 服务重新编译它并使用 angular.element('body').append 将它再次附加到页面。例如：

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

Answer 3

可以用angular元素来实现：

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

Answer 4

你需要在下面两行代码中将你的指令元素注入DOM，不要忘记在你使用它的地方添加$document & $compile 依赖。

var template = '<calender></calender>',
    body = $document.find('body');
body.append($compile(template)(scope));