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

Question

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

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

我尝试使用各种解决堆栈溢出问题的解决方案，但没有一个对我有用。

网址：http://algorithmictrading.azurewebsites.net/

App.js：http://algorithmictrading.azurewebsites.net/js/app.js

正在加载的 .html 页面示例： http://algorithmictrading.azurewebsites.net/includes/home.html http://algorithmictrading.azurewebsites.net/includes/about_us.html

.html 包含角度指令的页面： http://algorithmictrading.azurewebsites.net/includes/download.html

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

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

谢谢！

Answer 1

我发现，如果我在将指令传递到模板之前没有通过 $sce.trustAsHtml 方法传递指令，那么 Angular 会从 html 字符串中删除指令：

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

这与您插入 html 的元素内容的监视/编译相结合似乎可以解决问题：

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

看看这个例子：http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview。

Answer 2

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

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

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