Как вы можете добавить разметку HTML в массиве Javascript

Question

Мне нужно добавить небольшое количество HTML внутри части моего массива Javascript для резюме .Есть ли способ сделать это, поскольку в настоящее время он выводит в виде текста?

Пока у меня есть ниже

app.controller('primaryServiceListController', ['$scope', '$http', function($scope, $http){
    $scope.serviceListings = [
        {
            url: "details.html",
            img: "service-01.jpg",
            sector: "Business",
            synopsis: "Completely synergize resource taxing relationships <strong>via premier niche markets</strong>. Professionally cultivate one-to-one customer service robust."
        }
    ]
}]);

Answer 1

Вы можете отобразить строку в виде html следующим образом:

<div ng-bind-html="serviceListings[0].synopsis"></div>

Вы также можете создать фильтр и очистить данные, используя $sce, если хотите:

.filter('trustHtml', [
        '$sce',
        function($sce) {
            return function(value) {
                return $sce.trustAs('html', value);
            }
        }
    ]);

Ииспользовать его в html-файле

<div ng-bind-html="serviceListings[0].synopsis | trustHtml"></div>

Answer 2

Вы можете добавить его как текст, а затем использовать ng-bind-html в html для его визуализации.

<element ng-bind-html="expression"></element>

Answer 3

Вам необходимо включить ngSanitize в ваше приложение, а затем, в своем шаблоне, вы можете легко связать HTML, используя директиву ng-bind-html:

<div ng-bind-html="serviceListings[0].synopsis"></div>

.следующее рабочее демо:

angular.module('app', ['ngSanitize'])
  .controller('ctrl', ['$scope', function($scope) {
    $scope.serviceListings = [{
      url: "details.html",
      img: "service-01.jpg",
      sector: "Business",
      synopsis: "Completely synergize resource taxing relationships <strong>via premier niche markets</strong>. Professionally cultivate one-to-one customer service robust."
    }]
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular-sanitize.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-bind-html="serviceListings[0].synopsis"></div>
</div>