AngularJS $compile 移除之前的编译元素

Question

背景

我们有一个用 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 所以希望这是我在这里做错的事情:)

Answer 1

发现它作为第一个示例工作（请参阅我的评论中的 Plunker-URL）并且我们的应用程序中还有其他问题。

AngularJS $compile 移除之前的编译元素

AngularJS $compile removes previous compiled-element

angularjs

angularjs-compile