2

Wordpress プラグイン WP-API を使用して別のサイトからデータを取得するアプリがあります。

私はこの情報を表示するためにAngularJSを訴えています<p>text</p>.

このようなデータを取得しています (コードのスニペット)-

<script>

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

        app.controller('aLlCtrl', function($scope, $http) {
      var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=channel';
        $http.get(url).then(function(data) {
        $scope.data = data.data;
      });
    });
</script>

<body ng-app="myApp">


            <!--SHOOTING TYPE-->


            <div id="All" class="descshoot">

                <div  ng-controller="aLlCtrl">
                  <div ng-repeat="d in data">
                    <h2 class="entry-title title-post">{{d.title}}</h2>
                    <div id="listing-image"><img src="{{d.acf.logo}}"></div>
                    <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
                    <div id="listing-address-1">
                      {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
                    </div>
                    <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
                    <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
                    <div id="listing-email">Email: {{d.acf.email}}</div>
                    <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>
                    <div id="listing-established">Established: {{d.acf.established}}</div>
                    <div id="listing-about">About: {{d.acf.about}}</div>
                    <div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
                    <div id="listing-directions">Directions: {{d.acf.directions}}</div>
                    <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>
                  </div>
                </div>
              </div>
</body>

そして、ここに私のコードの（動作していない）ペンがあります-http://codepen.io/anon/pen/yePYdqと、動作しているサイトhttp://dev.5874.co.uk/goshooting/regions/channel -島/

どんな助けでも大歓迎です、

ありがとう！

4

1 に答える 1

3

ng-bind-html属性を使用する必要があります: JSFiddle

ドキュメンテーション

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  {{test}} <!--will show '<p>test</p>'-->
  <div ng-bind="test"></div> <!--will show '<p>test</p>'-->
  <div ng-bind-html="test"></div> <!--will show 'test'-->
</div>

JS:

angular.module("myApp", ["ngSanitize"])
  .controller("myCtrl", function($scope) {
    $scope.test = "<p>test</p>";
  });

注:ngSanitizeモジュールに含めることを忘れないでください。

于 2016-01-19T15:40:16.907 に答える