html - 无法动态加载 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

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

现在，代码基于这个线程： 在 Angular js 中的 $sce.trustAsHtml() 字符串中调用函数

谢谢！

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 文件中获取代码。