javascript - 在 AngularJS 完成异步加载后向 DOM 添加内容

Question

我有 Angular 代码通过 $http.get 异步获取 8 个 json 文件.这称为使用 ng-init="someFunct()"在附加的模板代码中。一切都很好，包括在用户输入文本框时进行过滤。过滤对我的应用程序尤为重要。

为了更好地进行过滤，我从上述 json 文件中提取关键字，然后用 <span class="tag" ng-click="filterWith='kywd'">{{kywd}}</span> 包装这些文件希望用户可以单击标签而不是键入。这只有在我静态嵌入标签时才有效——在实际应用程序中我无法提前知道关键字。如果我通过 $("#someContainerID").append(TAG_HTML_CODE) 动态插入或类似的它永远不会起作用!

简而言之，这就是我需要实现的目标:

1) 动态注入(inject)多个(成百上千个)这样的标签到 DOM 中；

2) 仅在加载和编译所有其他内容后才注入(inject)标签 - 特别是在读取 json 文件并提取关键字之后；

3) 我注入(inject)的标签需要响应类似 ng-click="filterWith='some_keyword'" 的内容

如果有一种方法可以判断 AngularJS 何时完成所有其他处理——那该有多好!我到处都读过，它看起来很神秘和令人困惑 - 请帮助!

我什至试过以下代码无济于事:

$timeout(function () {
        $scope.$apply(function () {

            //code that works on the keywords - works perfect!

            var filterRegex = /\s*([\w\d.%]+)\s*/i;
            var dom_elem = angular.element(document.querySelector("#filter_tags"));
            dom_elem.html("");
            for (var m = 0; m < tags.length; m += 1) {
                var match = filterRegex.exec(tags[m][0]);
                if (match != null) {
                    dom_elem.append($compile("<span data-ng-model=\"filterWith\" data-ng-click=\"filterWith='" + match[1] + "'\" title=\"" + tags[m][1] + "\" class=\"sk3tag clk\">" + match[1] + "</span>")($scope));
                }
            }
        });
    }, 10000, false);
}

编辑:将我的挑战范围缩小到主要是一个!

对我来说更大的挑战是如何启用ng-click在动态注入(inject)的代码中以及如何正确执行。

Answer 1

使用Promise.all()加载所有内容时触发。