无法动态加载 html 文件并解析 html 文件中的所有 angularjs 指令

Question

所以我建立了一个网站，我希望将其他 .html 文件动态加载到 div 中。每个 .html 文件都包含一些内容，但 1 个 .html 文件包含其自己的 angularjs 指令。

我正在使用 ng-bind-html 以及 $scope.content = $sce.trustAsHtml(data) ; 但我发现这会打印出 html raw（不处理任何 angular 指令）。

我尝试过使用各种解决堆栈溢出的方法，但 none 对我有用。

如您所见，如果您导航到该网站并单击 'download' 选项卡，则会加载内容，但不会处理下拉菜单中的 angular。我添加的测试按钮也应该会产生一个警告框。

现在，代码基于此线程： call function inside $sce.trustAsHtml() string in Angular js

谢谢！

Answer 1

这周遇到了同样的问题，我发现让它起作用的最好方法是创建一个名为 "BindComponent" 的自定义指令。将 ng-bind-html 指令更改为自定义指令，并在 link 方法中放置以下内容：

element.html(markupModel);
$compile(element.contents())(scope);

markupModel 可以是带有 html 代码的字符串，或者您可以使用 $templateCache($templateCache docs) 从 .html 文件中获取代码。

Answer 2

我发现如果我在将它们传递到模板之前没有通过 $sce.trustAsHtml 方法传递它们，angular 会从 html 字符串中剥离指令：

$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');

这与要插入 html 的元素内容上的 watch/compile 相结合似乎可以解决问题：

scope.$watch(getStringValue, function() {
    $compile(element, null, -9999)(scope);    
});

Failing to load html file dynamically and parsing all angularjs directives in html file