AngularJS 过滤器错误地返回 HTML

Question

我有一个返回 HTML 的过滤器，但 Angular 不能正确显示它。我包含了 angular-sanitize.min.js，并在各个地方尝试了 ng-bind-html 和 $sce。我知道我已经很接近了，但是在为此挣扎了几天之后，我想我会寻求一些专家的见解。一般来说，我对 Angular 和 javascript 还是很陌生。感谢您的帮助。

证明我已经消毒

<script src="lib/angular/angular-sanitize.min.js"></script>

app.js -- 清理包含并过滤我正在使用的

var myApp = angular.module('myApp', [
  'ngRoute',
  'clownfishControllers',
  'ngSanitize'
]);

myApp.filter('fmtIt', function () {
  return function (name) {
    var parts = name.split(' "');
    if (parts.length == 2) {
      return "<i>".concat(parts[0], "</i>", ' "', parts[1]);
    } else {
      return "<i>".concat(parts[0], "</i>");
    }
  }
});

list.html -- 我在 html 文件中的两个示例

<h2 ng-bind-html="item.name | fmtIt"></h2> --strips off html in output
<h2>{{item.name | fmtIt }}</h2>  --shows html tags in output

controllers.js -- 我尝试将 $sce 注入的控制器之一。

clownfishControllers.controller('ListCtrl', ['$scope', '$http', 'Parents', '$sce', function($scope, $http, Parents, $sce) {
  $http.get('js/data.json').success(function(data) {
    $scope.clownfish = data;
    $scope.clownfishOrder = 'name';
    $scope.parents = Parents;
    console.log($scope);

  });
}]);

app.js -- 最近的两次其他尝试，我尝试将这个作为附加过滤器堆叠在 fmtIt 过滤器上

myApp.filter('trustAsHTML', ['$sce', function($sce){
  return function(text) {
    return $sce.trustAsHtml(text);
  };
}]);

-- 最初尝试这个是为了获得 $sce

myApp.filter('fmtIt', function ($sce) {
  return function (name) {
    var parts = name.split(' "');
    if (parts.length == 2) {
      return $sce.trustAsHtml("<i>".concat(parts[0], "</i>", ' "', parts[1]));
    } else {
      return $sce.trustAsHtml("<i>".concat(parts[0], "</i>"));
    }
  }
});

Answer 1

很难从您发布的内容中判断您的问题出在哪里，但也许一个有效的演示可以让您比较您的实现并确定哪里出了问题。

var app = angular.module('demo', ['ngSanitize']);

app.controller('NamesCtrl', function($scope){
  $scope.names = [
    {first: 'Jennifer Ann', last: 'Meade'},
    {first: 'Colin', last: 'Davis'},
    {first: 'Karen Walker', last: 'Johnson'}
  ];
});

app.filter('fmtIt', function () {
  return function (name) {
    var parts = name.split(' ');
    if (parts.length == 2) {
      return "<i>".concat(parts[0], "</i>", ' ', parts[1]);
    } else {
      return "<i>".concat(parts[0], "</i>");
    }
  };
});

<script src="https://code.angularjs.org/1.3.17/angular.js"></script>
<script src="https://code.angularjs.org/1.3.17/angular-sanitize.js"></script>

<div ng-app="demo" ng-controller="NamesCtrl">
  <h1 ng-repeat="name in names"><span ng-bind-html="name.first | fmtIt"></span> {{name.last}}</h1>
</div>

此演示与您发布的示例代码中的第一个实现之间的一个区别是，我在一个空间上拆分，而不是 "，但在我的演示和相应数据中更改它，似乎没有有什么影响。

注意 angular.js 必须在脚本标签中的 angular-sanitize.js 之前加载。虽然，如果您在模块中正确注入 ngSanitize，如您所示，您将收到注入错误。

Answer 2

你试过这个组合吗？它对我有用。

<div ng-bind-html="htmlText | trustAsHTML"></div>

您无需为ng-bind-html 的值添加双花括号。

ng-bind-html documentation