Фильтр AngularJS возвращает HTML неправильно

У меня есть фильтр, который возвращает 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>"));
    }
  }
});
Источник

2 ответа

Решение

Трудно сказать, где ваша проблема, по сравнению с тем, что вы опубликовали, но, возможно, рабочая демонстрация позволит вам сравнить вашу реализацию и определить, что не так.

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 в свой модуль, как вы показали, вы получите ошибку внедрения.

Источник

Вы пробовали эту комбинацию? Меня устраивает.

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

Вам не нужно добавлять двойные фигурные скобки ng-bind-htmlценность.

документация ng-bind-html

Источник
Другие вопросы по тегам