为何AngularJS的$compile无法执行JavaScript代码？

你遇到的这个情况其实是AngularJS的安全机制和浏览器DOM解析规则共同导致的，咱们一步步拆解：

为什么样式生效但脚本不执行？ #

• 样式能正常生效：当你通过element.html()插入包含<style>的内容时，浏览器会自动解析并应用这些样式规则——不管是静态写死的还是动态插入的样式表，浏览器都会正常处理并加载。
• 脚本无法执行：
  1. AngularJS的$compile服务核心是处理Angular专属的指令、插值表达式（比如你代码里的{{ message }}），但它不会主动执行动态插入的<script>标签代码，这是Angular为防范XSS攻击设计的安全策略，避免不可信脚本随意执行。
  2. 退一步说，就算Angular不拦截，浏览器本身对通过innerHTML（element.html()本质就是操作innerHTML）插入的内联<script>标签，也不会自动执行里面的代码（带src的远程脚本也有严格的执行限制）。

解决方法 #

方法1：遵循Angular最佳实践（推荐） #

把脚本逻辑移到Angular的控制器、指令或者服务中，不要靠动态插入<script>来执行代码——这才是Angular倡导的代码组织方式。比如你可以把弹窗逻辑放到控制器里，或者在编译完成后的指令回调中触发：

<html>
<body>
  <div ng-app="myModule">
    <div ng-controller="myController">
      <div compile="html"></div>
    </div>
  </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <script type="text/javascript">
    var module = angular.module("myModule", []);
    module.controller("myController", function ($scope) {
      $scope.message = "World";
      var html = "<div class='hello'>Hello {{ message }}</div>";
      var style = "<style type='text/css'>.hello { font-weight: bold; }</style>";
      $scope.html = html + style;
    });
    module.directive("compile", function ($compile) {
      return function (scope, element, attrs) {
        scope.$watch(
          function (scope) {
            return scope.$eval(attrs.compile);
          },
          function (value) {
            element.html(value);
            $compile(element.contents())(scope);
            
            // 编译完成后执行弹窗逻辑
            window.alert('Hello from JS!');
          }
        );
      };
    });
  </script>
</body>
</html>

方法2：手动提取并执行动态脚本（不推荐，注意安全） #

如果你确实需要执行动态插入的脚本内容，可以在$compile之后手动提取<script>标签里的代码并执行，但要注意这会带来XSS风险，只在你完全信任动态内容来源的情况下使用：

<html>
<body>
  <div ng-app="myModule">
    <div ng-controller="myController">
      <div compile="html"></div>
    </div>
  </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <script type="text/javascript">
    var module = angular.module("myModule", []);
    module.controller("myController", function ($scope) {
      $scope.message = "World";
      var html = "<div class='hello'>Hello {{ message }}</div>";
      var style = "<style type='text/css'>.hello { font-weight: bold; }</style>";
      var script = "<script type='text/javascript'>window.alert('Hello from JS!');<\/script>"; // 注意转义闭合标签
      $scope.html = html + style + script;
    });
    module.directive("compile", function ($compile) {
      return function (scope, element, attrs) {
        scope.$watch(
          function (scope) {
            return scope.$eval(attrs.compile);
          },
          function (value) {
            element.html(value);
            $compile(element.contents())(scope);
            
            // 手动提取并执行script内容
            var scripts = element.find('script');
            angular.forEach(scripts, function(script) {
              var scriptContent = script.textContent || script.innerText;
              if(scriptContent.trim()){
                // 在Angular作用域内执行脚本
                scope.$eval(scriptContent);
              }
              // 执行后移除script标签，避免重复触发
              angular.element(script).remove();
            });
          }
        );
      };
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者TDT