javascript - 如何在包含 <script> 标签时使用 $sce.trustAsHtml

Question

我有一个 AngularJS 组件，它将 HTML 加载到它的范围内并使用 ng-bind-html .我注意到 <script>标签未执行。

如何让这个示例代码发出警报？

app.component('myComponent', {
    bindings: { 
        file: '<' 
    },
    controller: function($http, $sce) {
        var $ctrl = this;
        $ctrl.onChanges = function(changes) {
            $http.get($ctrl.file).then(function(response){
                $ctrl.html = $sce.trustAsHtml(response.data);
            });
        };
    },
    template: '<div><div ng-if="$ctrl.html" ng-bind-html="$ctrl.html"></div></div>'
});

$http返回的数据是:

<div> I am html <script>alert('I am a script')</script></div>

或者，如果我想在 HTML 中引用 Controller 怎么办？

<div ng-controller="myController"> I am html</div>

Answer 1

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