Question

我将ngSanitize模块添加到我的应用程序并添加了javascript文件。

public class Employee : PersonBase {...}

但是html输出只是没有属性。例如，var myApp = angular.module('partApp', ['ngRoute', 'ngSanitize', ...]仅输出没有样式的跨度。

myhtml = '<span style="font-size:12px">test</span>'

Answer 1

你需要在html中使用$ sce.trustAsHtml ... ng-bind-html="trustAsHtml()" 并在控制器

$scope.trustAsHtml = function(html){
return $sce.trustAsHtml(html);
}

或者更好的是创建自己的$ compile指令，例如：

app.directive('ngHtmlCompile',function ($compile) {
  return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
           // watch the 'compile' expression for changes
          return scope.$eval(attrs.ngHtmlCompile);
        },
        function(value) {
          // when the 'compile' expression changes
          // assign it into the current DOM
          element.html(value);

          // compile the new DOM and link it to the current
          // scope.
          // NOTE: we only compile .childNodes so that
          // we don't get into infinite loop compiling ourselves
          $compile(element.contents())(scope);
        }
    );
};

}）;

然后像这样使用它：

<span ng-html-compile="html"></span>

编辑 - 进行了小修补 这是显示代码的jsfiddle

Answer 2

Angular html-binding不完全信任插值表达式。您需要使用$ sce service（https://docs.angularjs.org/api/ng/service/$sce）明确告诉它信任某个特定的表达式。

在你的控制器的某个地方你应该有这个片段：

myhtml = $sce.trustAsHtml(myhtml);

Answer 3

对我来说，过滤器更有效

angular.module('app.filters', [])
.filter("sanitize", ['$sce', function($sce) {
    return function(htmlCode){
     return $sce.trustAsHtml(htmlCode);
   }
}]);

在html中使用：

<div ng-if="show!==undefined" ng-cloak ng-bind-html="myhtml | sanitize"></div>

Angular ng-bind-html / sanitize不起作用

3 个答案: