javascript - 在不阻塞 dom 的情况下从后端渲染 ($compile) html 到 View 中

Question

语境

我需要在我的 AngularJS (v1.4) 应用程序中加载一些从后端获取的 HTML 并将其(html)插入我的 partial (已加载)。部分已经加载了一些 HTML(并且功能齐全)。现在我可以加载 HTML 并使用此处发布的指令 ( Compiling dynamic HTML strings from database ) 对其进行编译。请参阅下面的代码。

问题

但是...当部分 HTML 已加载(部分 已加载且正常运行)然后我从后端获取另一个 HTML 内容时，指令正在编译新内容，即整个文档(DOM) 被“卡住”。我无法输入内容或点击任何按钮，包括我之前加载的 HTML 中的按钮。

问题

我如何加载 HTML 内容，在“后台”$compile 或任何其他允许我继续使用其余(已经可用的)HTML 的方式？

对我来说，编译到达的新 html 内容是必要的，因为它包含需要编译的 Angular 验证等，并进入“Angular 世界”(在 Angular digest cycle 等内部) ).

这是我用来编译 html 的指令

(function () {

    var dynamic = function($compile) {
        return {
            restrict: 'A',
            replace: true,
            link: function (scope, ele, attrs) {
                scope.$watch(attrs.dynamic, function(html) {
                    if (html) {
                        ele.html(html);
                        $compile(ele.contents())(scope);
                    }

                });
            }
        };
    };

    dynamic.$inject = ['$compile'];

    angular.module('app')
        .directive('dynamic', dynamic);
}());

在 Controller 中我有类似的东西

// this will be filled with asynchronous calls were I get the HTMLs from a service
// in order to keep this example simple I just made a demo, not with the real async calls
$scope.secciones = []

//when the promises are getting resolved "secciones" would be something like (more items can be added after in time)
$scope.secciones = [
    {html: "<div> some html content here (not too small sometimes) </div>"},
    {html: "<div> another html content here (not too small sometimes) </div>"}
]

...并在 View 中

<!--every time an async call with html is resolved, it's added to secciones, then a new div is generated and compiled-->
<!-- if there was some html previously rendered and the app starts compiling new html the UI gets "freezed"-->
<div ng-repeat="item in secciones">
    <div dynamic="item.html"></div>
</div>

注意:我使用这种方法是因为每个 html 代表我拥有的选项卡面板中的一个选项卡，用户实际上只能在“secciones<”中看到所有这些 html/em>”(其他的隐藏了，但仍然存在)，但我需要编译其他的，以便在用户单击其他选项卡(secciones).

如果可以通过升级到更新版本的 AngularJS(1.x) 来解决这个问题，例如 1.6。我很乐意尝试一下。

Answer 1

基本上我是通过从脚本标签获取 html 并编译它并附加到现有的 div 来完成此操作的。 您可以使用以下代码段。

Include div in your html

<div id="step-container">

</div>

Controller code

var template = $templateCache.get('basicInfo'); // or your html
$compile($("#step-container").html(template).contents())($scope);
$("#step-container").show();

For demonstration this will be included in html page

<script type="text/ng-template" id="basicInfo"></script>

通过这种方式，您可以编译来自后端的 html。

希望对您有所帮助。