AngularJS $compile 删除以前的编译元素答案

【问题标题】：AngularJS $compile removes previous compiled-elementAngularJS $compile 删除以前的编译元素
【发布时间】：2018-09-15 02:21:53
【问题描述】：

背景

我们有一个用 jQuery 和 Handlebars 编写的旧应用程序，我们正在逐步迁移到 AngularJS（这项工作多年前开始，从未完成，因此 AngularJS）。

问题

为了部分迁移，出于几个不同的原因，我们将指令注入到旧的 Handelbars 模板中。我面临的问题是我不能在同一视图中$compile 两个不同的指令，因为看起来，其中一个指令清空了另一个指令。

我可以通过围绕一个指令设置超时来解决这个问题，但我不认为这是一个有效的解决方法，所以我希望它可以通过其他方式完成。

相关代码

这就是我们将指令加载到 Handlebars 模板中的方式：

<div id="ng-wrapper"></div>
<script type="text/javascript">
    $(document).ready(function() {
        angular.element(document).injector().invoke(['$compile', function ($compile) {
            var wrapperEl = $('ng-wrapper');
            var scope = angular.element(wrapperEl).scope();
            wrapperEl.append($compile('<directive-one></directive-one>')(scope);
        }]);
    });
</script>

如果我尝试将第二个指令添加到该调用函数中，则一个指令被清空并且只显示一个指令，如下所示：

<div id="ng-wrapper"></div>
<script type="text/javascript">
    $(document).ready(function() {
        angular.element(document).injector().invoke(['$compile', function ($compile) {
            var wrapperEl = $('ng-wrapper');
            var scope = angular.element(wrapperEl).scope();
            wrapperEl.append($compile('<directive-one></directive-one>')(scope);
            wrapperEl.append($compile('<directive-two></directive-two>')(scope);
        }]);
    });
</script>

如果我添加超时，它会起作用，如下所示：

<div id="ng-wrapper"></div>
<script type="text/javascript">
    $(document).ready(function() {
        angular.element(document).injector().invoke(['$compile', '$timeout', function ($compile, $timeout) {
            var wrapperEl = $('ng-wrapper');
            var scope = angular.element(wrapperEl).scope();
            wrapperEl.append($compile('<directive-one></directive-one>')(scope);
            $timeout(function () {
                wrapperEl.append($compile('<directive-two></directive-two>')(scope);
            }, 500);
        }]);
    });
</script>

我已经使用 AngularJS 很多年了，但之前没有接触过$compile，所以希望这是我在这里做错了:)

【问题讨论】：

应该是wrapperEl.append($compile('<directive-one></directive-one>')(scope))。请提供复制问题的stackoverflow.com/help/mcve。这可能取决于指令是什么。在这里很合适。
@estus 感谢您让我保持直截了当 :) 我在这里创建了一个 plunker：plnkr.co/edit/1LmyTuSImFFER4FHPnHG，它可以正常工作。所以答案是我们的应用程序有其他问题我猜 sigh 感谢您的时间 :)
没问题。我建议仔细看看这些指令是如何工作的。

标签： angularjs angularjs-compile

【解决方案1】：

发现它可以作为第一个示例使用（请参阅我评论中的 Plunker-URL），并且在我们的应用程序中存在其他问题。

【讨论】：