html - 如何使用 angularJS 显示混合的 html 和 css

Question

假设我有一个同时包含 CSS 和 HTML 代码的字符串:

<style>.leaf{ color:#0f0; }</style><h1 class="leaf>Tree</h1>

如果我使用 $sce.trustAs($sce.HTML, mystring)，它不会呈现 CSS。您也不能连接“trustAs”函数。

那么如何渲染所有内容呢？

Answer 1

使用 angular.element 创建一个元素，然后您可以将字符串附加到该元素。

然后将样式标签从元素中拉出来，附加到页面的头部

这将在发送到 View 之前在 Controller 或服务中的预处理器中完成

然后让 Angular 清理字符串，样式将已经在页面中。

  var str='<style>.leaf{ color:#0f0; }</style><h1 class="leaf">Tree</h1>';
  // create element to append string to
  var $el= angular.element('<div>');
  $el.append(str);
  var $style = $el.find('style').addClass('sanitized-style');
  angular.element($document[0].head).append($style);

在销毁 Controller 时移除

$scope.$on('$destroy', function(){
   angular.element( $document[0].getElementsByClassName('sanitized-style')).remove();
});

DEMO