ng-bind-html 不适用于脚本答案

【问题标题】：ng-bind-html doesn't work with scriptng-bind-html 不适用于脚本
【发布时间】：2017-03-13 13:51:06
【问题描述】：

我是 Angular js 的新手。所以这可能是一个非常基本的问题

我有外部 API 数据，它是用户生成的内容。客户端想要动态显示内容。在内容中，有创建指令的脚本，我尝试使用 ng-bind-html 但它不起作用。

<div ng-bind-html="myHTML"></div>

想要执行创建指令的脚本，并且应该在 html 内容中注入相同的指令。

var data = '<script> var app = angular.module(\'main\', []);' +
'app.directive(\'slideImageComparison\', function () {return { restrict:           \'E\', scope: { imageInfo: \'=info\'}, link: function (scope, elem, attr) { console.log(\'directive called\');' +
    '},template: \'<div class="slide-comb"> test </div>\'' +
'}; }); </script>      <slide-image-comparison></slide-image-comparison>';

$scope.myHTML= $sce.trustAsHtml(data)

我添加了反斜杠来转义单引号。

在这里感谢您的帮助。

【问题讨论】：

由于浏览器的设计，这不起作用。 <script> 插入 HTML 的标签在页面加载时执行；由于页面加载时此内容不存在，因此永远不会执行。你应该研究角度延迟加载技术。
此外，如果它仍然执行，此脚本会破坏您的main 模块，因为它似乎是重新声明 main 模块，而不是添加到它。
谢谢，有没有其他方法可以做到这一点？
@user3106005 使用正则表达式获取脚本并评估它怎么样？
对不起，我是新手，任何例子都会非常感激。

标签： javascript angularjs ng-bind-html

【解决方案1】：

演示：http://plnkr.co/edit/L8FWxNSQO6VAf5wbJBtF?p=preview

基于Add directive to module after bootstrap and applying on dynamic content

html:

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  <script src="./app.js"></script>
</head>



<body  ng-app="demo">
  <div ng-controller="mainController">
    <external-html external-data="external"></external-html>
  </div>
</body>

</html>

js:

var module1 = angular.module("demo", []);
module1.controller("mainController", ["$scope", function(sp) {

  var external = `<script> 
  module1.lazyDirective('sl', function () {
      return { restrict:'E', 
              scope: { imageInfo: '=info'}, 
              link: function (scope, elem, attr) { 
                  console.log('directive called');
              },
              template: '<div class="slide-comb"> test </div>'}; 
  }); 
  </script>      
  <sl></sl>`;
  sp.external = external;
}]).config(function($compileProvider) {
  module1.lazyDirective = $compileProvider.directive;
}).directive('externalHtml', ["$parse", "$compile", function($parse, $compile) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      const data = $parse(attrs.externalData)(scope);
      const el = document.createElement('div');
      el.innerHTML = data;
      const scripts = el.getElementsByTagName("script");
      for (let i in scripts) {
        console.log(scripts[i].textContent)
        eval(scripts[i].textContent);
      }

      element.append($compile(data)(scope));


    }
  }
}]);

【讨论】：

嗨，我尝试了 eval 但仍然无法正常工作:(。有没有办法检查脚本是否正确加载/执行？
您可以 console.log() 脚本。顺便说一句，也许你应该使用 "$compile" 来处理 html 字符串。
你建议这样吗？ $scope.myHtml = $compile(data)($scope);
不，你得到的是函数返回的元素，而不是 html 字符串。你应该使用“附加”的东西为它写一个指令。
@user3106005 等一两个小时，我自己试试。现在是在中国工作的时间。