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>

如果我尝试在该invoke-function中添加第二个指令，则会清空一个指令并且只显示一个指令，如下所示：

<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删除以前的编译元素

1 个答案: