javascript - 使用 angular.element() 注入(inject)嵌套内联脚本标记不起作用

Question

我想向我的 DOM 注入(inject)以下嵌套字符串:

<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);

那么我的 Angular 解决方案有什么问题吗？

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>