AngularJS: Как преобразовать данные JSONP в HTML

Question

AngularJS: Как преобразовать данные JSONP в HTML

0

Я новичок в концепции $ http и пытается получить данные с разных сайтов. Мой вопрос. Как я смогу отображать JSONP в HTML? В моем $ http, я запрашиваю страницу Atari Wikipedia. На странице отображается содержимое с элементами HTML

""

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

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

app.controller('DataCtrl', ['$scope', '$http',
  function($scope, $http) {
    // $scope.list;
    var url = 'http://en.wikipedia.org/w/api.php?titles=atari&rawcontinue=true&action=query&format=json&prop=extracts&callback=JSON_CALLBACK';

    $http.jsonp(url).success(function(data) {
      $scope.info = data.query.pages[2234].extract;
    }).error(function(data) {
      $scope.data = "Error";
    });

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div id="wrapper" ng-app="app">
  <div ng-controller="DataCtrl">
    <div>{{info}}</div>
  </div>
</div>

Recon 06 окт. 2015, в 21:44

Источник

0

Что ты пробовал?
Bas Slagter 06 окт. 2015, в 19:03

Теги:

javascript

angularjs

3 ответа

Ещё вопросы

Lajos Veres · Answer 1 · 2015-10-06T17-10-00.000Z

Я попытался передать его через функцию $sce.trustAsHtml и отобразить его с помощью ng-bind-html:

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

app.controller('DataCtrl',['$scope','$http', '$sce',function($scope,$http, $sce){
    // $scope.list;
    var url = 'http://en.wikipedia.org/w/api.php?titles=atari&rawcontinue=true&action=query&format=json&prop=extracts&callback=JSON_CALLBACK';

    $http.jsonp(url).success(function(data){
        $scope.info = $sce.trustAsHtml(data.query.pages[2234].extract);
    }).error(function(data){
        $scope.data = "Error";
    });

    }]);

,

 <div ng-bind-html="info"></div>

И не забудьте ознакомиться с соответствующими документами

Без каких-либо дополнительных проверок это сделает вашу систему уязвимой. (XSS и подобные вещи)

Это сработало для меня! Я ценю помощь Lajos!

Pankaj Parkar · Answer 2 · 2015-10-06T17-00-00.000Z

Если вам интересно только показать html, тогда вы можете использовать директиву ng-bind-html на странице для привязки html к переменной области видимости, но для этого нужно также $sce.trustAsHtml чтобы сделать html sanitize. Вам также необходимо добавить модуль ngSanitize в свой основной модуль приложения с помощью angular-sanitize.js

наценка

<div ng-bind-html="trustedHtml(info)"></div>

контроллер

app.controller('DataCtrl', ['$scope', '$http', function($scope, $http, $sce) {
    // $scope.list;
    var url = 'http://en.wikipedia.org/w/api.php?titles=atari&rawcontinue=true&action=query&format=json&prop=extracts&callback=JSON_CALLBACK';

    $http.jsonp(url).success(function(data) {
        $scope.info = data.query.pages[2234].extract;

    }).error(function(data) {
        $scope.data = "Error";
    });

    $scope.trustedHtml = function(val){
        return $sce.trustAsHtml(val)
    }

}]);

EsteBusta · Answer 3 · 2015-10-06T18-56-00.000Z

Директива ng-bind-html работает хорошо, как уже объяснялось, но было бы полезно только для отображения данных, если вы хотите манипулировать в контроллере данными, тогда вы можете использовать $sanitize(html);