Question

我有一个AngularJS组件，它将HTML加载到其范围内并使用 ng-bind-html 。我注意到＆lt; script＆gt; 标签没有执行。

＆＃xA;＆＃xA;

如何让这个示例代码提醒？

＆＃xA;＆＃xA;

  app.component（'myComponent' ，{＆＃xA; bindings：{＆＃xA; file：'＆lt;'＆＃xA;}，＆＃xA; controller：function（$ http，$ sce）{＆＃xA; var $ ctrl = this; ＆＃xA; $ ctrl.onChanges = function（changes）{＆＃xA; $ http.get（$ ctrl.file）.then（function（response）{＆＃xA; $ ctrl.html = $ sce.trustAsHtml（ response.data）;＆＃xA;}）;＆＃xA;};＆＃xA;}，＆＃xA; template：'＆lt; div＆gt;＆lt; div ng-if =“$ ctrl.html”ng-结合-HTML = “$ ctrl.html” ＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;'＆＃XA;}）;＆＃XA;

＆＃XA;＆＃XA; 正在返回的 $ http 数据是：
＆＃xA;＆＃xA;  ＆lt; div＆gt;我是html＆lt; script＆gt; alert（'我是一个脚本'）＆lt; / script＆gt;＆lt; / div＆gt;  
＆＃xA;＆＃xA; 或者，如果我怎么办？想在HTML中有一个控制器引用吗？
＆＃xA;＆＃xA;  ＆lt; div ng-controller =“myController”＆gt;我是html＆lt; / div＆gt;  ＆＃xA;

Answer 1

在幕后，$http.get只是使用XMLHttpRequest。由于安全性限制，即跨站点脚本，动态添加到DOM的脚本（例如，在XMLHttpRequest之后添加）不会执行。因此，在HTML中执行脚本的唯一方法是在结果中找到脚本标记，然后在内容上调用eval()。

如何使用$ sce.trustAsHtml包含<script>标签

1 个答案: