«ng-bind-html-unsafe» ничего не отображает

Я показываю строку, содержащую HTML-код из JSON. Пожалуйста, проверьте свойство «Имя» во втором объекте.

Однако, когда я использую «ng-bind-html-unsafe», он ничего не отображает.

Я также использовал ngSanitize.

Не могли бы вы помочь мне понять, что не так с моим кодом?

angular.module('myApp', ['ngSanitize']).controller('myCtrl', ['$scope', '$sce', function($scope, $sce){
  $scope.card = [{
    Name: "New Year Celebration",
    Description: "",
    Venue: "",
    StartDate: "Fri Dec 29 2017 23:30:00 GMT+0530",
    EndDate: "Sat Dec 30 2017 00:30:00 GMT+0530",
    EventID: "1"
  }, {
    Name: "<P>25th Anniversary Celebration</P>",
    Description: "25th Anniversary Celebration of organization",
    Venue: "Auditorium",
    StartDate: "Wed May 31 2017 17:30:00 GMT+0530",
    EndDate: "Wed May 31 2017 20:30:00 GMT+0530",
    EventID: "2"
  }, {
    Name: "Annual Day",
    Description: "",
    Venue: "",
    StartDate: "Fri Oct 13 2017 14:30:00 GMT+0530",
    EndDate: "Fri Oct 13 2017 17:30:00 GMT+0530",
    EventID: "3"
  }];
  
  $scope.trustAsHtml = function(html) {
	return $sce.trustAsHtml(html);
  }
  $scope.add = function(eventObj) {
  $scope.eventID= this.eventObj.EventID;
  $scope.startDate= this.eventObj.StartDate;
    $scope.endDate= this.eventObj.EndDate;
    $scope.venue= this.eventObj.Venue;
    $scope.subject= this.eventObj.Name;
    $scope.result= this.eventObj.Description;
  //console.log(this);
    $scope.icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nDTSTART:" + $scope.startDate +"\nDTEND:" + $scope.endDate +"\nLOCATION:" + $scope.venue + "\nSUMMARY:" + $scope.subject + "\nDESCRIPTION:"+ $scope.result +"\nEND:VEVENT\nEND:VCALENDAR";
	window.open("data:text/calendar;charset=utf8," + escape($scope.icsMSG),"_self");
  };
}]);
.event {
  height: 150px;
  width: 250px;
  border: 1px solid lightgrey;
  background-color: skyblue;
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.5/angular-sanitize.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="eventObj in card" class="event">
  Subject: <span ng-bind-html="trustAsHtml(eventObj.Name)"></span>
  <br /><br />	
  Venue:<span>{{eventObj.Venue}}</span>
  <br /><br />	
  Date:<span>{{eventObj.StartDate | date:'fullDate'}}</span>
  <br /><br />
  <button ng-click="add(eventObj.EventID)">Add to Outlook</button>
  </div>
</div>


json object angularjs ng-bind-html ngsanitize
person Sunny    schedule 10.07.2017    source источник
comment
Расскажите, какую ошибку выдает ваша сетевая консоль. Что-то вроде того, откуда его заблокировали.   -  person Doomenik    schedule 10.07.2017
comment
О, и не забудьте отключить любой блокировщик рекламы, иначе он все равно не загрузится.   -  person Doomenik    schedule 10.07.2017
comment
Я обновляю ответ. Вот рабочая демонстрация. plnkr.co/edit/sFhaSJ2Ir9PYUObdtcnj?p=preview   -  person Ved    schedule 10.07.2017
comment
@sunny обновленный ответ решил проблему?   -  person Ved    schedule 10.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы используете Angular 1.6.x, а ng-bind-html-unsafe давно устарел. Вы можете использовать:ng-bind-html

<div ng-bind-html="eventObj.Name"></div>

Примечание. В контроллере введите $sce,

Редактировать 1: добавьте этот метод внутри вашего контроллера:

Фильтр:

angular.module('myApp')
.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
         var doc = new DOMParser().parseFromString(text, "text/html");
         var   rval= doc.documentElement.textContent;
        console.log(rval)
        return $sce.trustAsHtml(rval)
    };
}]);

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="eventObj in card" class="event">
  Subject: <span ng-bind-html="eventObj.Name|to_trusted"></span>
  <br /><br />  
  Venue:<span>{{eventObj.Venue}}</span>
  <br /><br />  
  Date:<span>{{eventObj.StartDate | date:'fullDate'}}</span>
  <br /><br />
  <button ng-click="add(eventObj.EventID)">Add to Outlook</button>
  </div>
</div>

Рабочая демонстрация: https://plnkr.co/edit/sFhaSJ2Ir9PYUObdtcnj?p=preview

person Ved    schedule 10.07.2017
comment
Благодарю вас! Но работает частично! Пожалуйста, проверьте обновленный код во фрагменте выше. - person Sunny; 10.07.2017
comment
Проверьте этот ответ . Вам нужно установить ненадежный html как надежный. - person Burak Akyıldız; 10.07.2017
comment
Это не работает. Может быть, я использую это неправильно. Не могли бы вы мне помочь? - person Sunny; 10.07.2017
comment
Хорошо. проверка вопроса - person Ved; 10.07.2017
comment
Я предполагаю, что это из-за нескольких специальных символов '' и '', обернутых вокруг тега p. - person Sunny; 10.07.2017
comment
Да. Ты прав. Если вы замените их тегом html, он отлично работает - person Ved; 10.07.2017
comment
Но JSON, который я получаю, имеет формат, который я использовал здесь. Отсюда и проблема! - person Sunny; 10.07.2017
comment
Ага. Я предполагаю, что это ограничение. Вы можете поднять этот вопрос в документах - person Ved; 10.07.2017
comment
Давайте продолжим обсуждение в чате. - person Ved; 10.07.2017