angularjs - 如何执行从服务器检索的脚本标签

Question

我正在开发一个博客应用程序。我想创建包含 HTML 和代码片段的帖子（存储在数据库中的数据）我想创建 github gists 并使用它们提供的嵌入式脚本标签在您的网站上显示 gist。那就是我遇到问题的地方。我可以使用 ng-bind-html 让 HTML 显示得很好，但该绑定似乎正在剥离脚本标记。我找到了这篇文章：插入 HTML 和应该运行的脚本。我在 Angular 之前加载 jQuery，但它似乎没有帮助。此外，我使用的是 v1.2，它不再具有 ng-bind-html-unsafe，这就是我使用 ng-bind-html 的原因，它可以完美地工作，只是它会去除脚本标签。

也许这完全是个坏主意。有没有更好的方法来完成我想要的？

Answer 1

我决定注意文档中的警告，而不是执行来自我的数据库的脚本。相反，我找到了 GitHub gists 的替代方案：http: //alexgorbatchev.com/SyntaxHighlighter

现在我仍然可以在我的博客条目中使用 HTML 并ng-bind-html对其进行清理，并且我可以在我的布局中嵌入语法荧光笔脚本。我只需要创建一个指令来调用它：

布局

<article ng-repeat="blog in blogs" repeat-done="layoutDone()">
  <h4 class="title-bg">{{blog.title}}</h4>
  <div class="post-summary">
    <p ng-bind-html="blog.body"></p>
  </div><!-- /post-summary -->
</article>

指示

angular.module('socketwizApp')
 .directive('repeatDone', function ($parse) {
   return {
     restrict: 'A',
     link: function (scope, element, attrs) {
       if (scope.$last) {
         var fn = $parse(attrs.repeatDone);
         fn(scope);
       };
     }
   };
 });

控制器

$scope.layoutDone = function() {
     $timeout(function(){
       SyntaxHighlighter.defaults.toolbar = false;
       SyntaxHighlighter.highlight();
     }, 0);
 };

Answer 2

使用$sce。特别是 $sce.JS。或者您可以降级 angular 但 sce 是一种新方法。