如何在将指令插入DOM后重新编译它（angularjs）

Question

Okay, so I've created a directive let's say

<calendar></calendar>

我的期望结果已经成功渲染出来了，现在我的问题是如何在插入到 DOM 后重新渲染它？我不想一直在网页上使用它，我只想在需要时动态添加并渲染它（它是一个模块的一部分）。比如说，理想情况下我希望它像这样出现：

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

我该如何使用AngularJS实现这个功能？

- Carteră Veaceslav

Answer 1

无论您想在什么地方注入指令元素，都需要编写以下两行代码。请记得在使用时添加$document和$compile依赖项，使其更易于理解。

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

- Pankaj Parkar

---

那么这实际上意味着创建另一个指令来编译我的指令吗？不，我想找到一行解决方案。 - Carteră Veaceslav

为什么在Angular中实现这个功能会变得如此复杂？使用“纯”jQuery，我可以编写$("#mySelector").myModuleName({ ...my parameters })，并且可以轻松地在我想要的位置和时间渲染我的自定义模块... - Carteră Veaceslav

@CarterăVeaceslav，你在这里有很多答案，你可以至少接受其中一个吗？ - Pankaj Parkar

我找不到解决方案，至少不是我所期望的方式。也许这是因为我期待AngularJS处理方式与实际不符，或者是因为我还没有完全了解它的工作方式和预期。我会接受您的答案作为解决方案。无论如何，感谢所有参与其中的人。 - Carteră Veaceslav

@CarterăVeaceslav 是的，我认为你是 Angular 的新手，这就是为什么你会这样思考的原因。如果你能添加 jsfiddle/plunkr 并演示你的问题，将有助于我们找到更好的解决方式，这也是你想要的。谢谢。 - Pankaj Parkar

Answer 2

可以通过angular元素实现：

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

- Zaheer Ahmed

---

我直接从Chrome控制台尝试，它显示“$compile未定义”。我错过了什么？ - Carteră Veaceslav

@CarterăVeaceslav 在你的指令函数中加入依赖项 $compile。 - Pankaj Parkar

无法使其工作，我的指令是w_calendar.directive("wcalendar", function ($compile) { return { restrict: "AE", templateUrl: "templates/w_calendar.html", replace: true }; }); - Carteră Veaceslav

$compile在控制台中不可访问，它未定义。 - Carteră Veaceslav

你的 link: function(){} 在哪里？从那里你可以编译你的元素。 - Pankaj Parkar

Answer 3

这是英语文本，翻译为中文如下：

操作顺序如下：

1. Create DOM element or angular.element object:

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

2. Pass it to $compile service. At this stage you need to provide necessary scope object:

   $compile(calendar)(scope);
   

3. Append calendar element to document:

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

所以全部放在一起看起来像这样：

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

- dfsq

---

(2) $compile未定义。 - Carteră Veaceslav

你需要将它注入到你的服务/控制器中。 - dfsq

@dsfq 你认为使用工厂来操作DOM是一个好的做法吗？ - Pankaj Parkar

@pankajparkar 有时候你必须这样做。例如，拿AngularUI模态服务来说。 - dfsq

@dsfq 你说得非常正确，感谢你解决我的疑惑。 - Pankaj Parkar

Answer 4

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

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

- Daniël Smink