Question

我想向我的DOM注入以下嵌套字符串：

<div><script>alert(1);</script></div>

当我尝试使用angular.element()执行任务时，它会将其添加到DOM中，但不会触发内联脚本：

var body = angular.element(document.body);
var el = angular.element('<div><script>alert(1);</script></div>');
body.append(el);

如果我使用jQuery，它的效果很好：

$('body').append('<div><script>alert(1);</script></div>');

当我逐个显式创建DOM元素时，它也可以工作：

var d = document.createElement('div');
var s = document.createElement('script');
s.innerHTML='alert(1)';
d.appendChild(s);
document.body.appendChild(d);

那么我的角度解决方案有什么问题？

Answer 1

对于添加脚本，您可以使用endorama

添加的此解决方案

/*global angular */
(function (ng) {
  'use strict';

  var app = ng.module('ngLoadScript', []);

  app.directive('script', function() {
    return {
      restrict: 'E',
      scope: false,
      link: function(scope, elem, attr) {
        if (attr.type === 'text/javascript-lazy') {
          var code = elem.text();
          var f = new Function(code);
          f();
        }
      }
    };
  });

}(angular));

只需在模板中添加此脚本

即可

<script type="text/javascript-lazy">
   alert(1);
</script>

Answer 2

试试这个

$scope.$apply(function() {
                    var body = angular.element(document.body);
                    var el = angular.element('<div><script>alert(1);</script></div>');
                    body.append(el);
               });

Answer 3

试试这个。

<!DOCTYPE html>
<html ng-app="demo">
<head>
    <meta charset="UTF-8">
    <title>Ang</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="angular-route.js"></script>
    <script>
        var app = angular.module("demo",['ngRoute']);

        app.controller("firstCtrl",function($scope){
            $scope.submit = function(){
                var bod = angular.element(document.body);
                var el = "<div><script>alert(1)<\/script><\/div>";
                bod.append(el);
            }
        })
    </script>
</head>
<body>
    <div ng-controller="firstCtrl">
        <button ng-click="submit()">TEST</button>
    </div>
</body>
</html>

Answer 4

我发现唯一可行的解决方案是用新创建的标签替换每个脚本标签，然后附加到DOM。

http://jsbin.com/luxepicedo/edit?js,console

使用angular.element（）注入嵌套的内联脚本标记不起作用

4 个答案: