HTML 个标签显示在 AngularJS 中
HTML tags showing in AngularJS
我有一个应用程序使用 Wordpress 插件 WP-API.
从另一个站点获取数据
我正在起诉 AngularJS 然后显示此信息,我对 AngularJS 真的很陌生所以我的问题是从帖子中提取了正确的信息但是 HTML 标签显示如 <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 and the site where it's working http://dev.5874.co.uk/goshooting/regions/channel-islands/
如有任何帮助,我们将不胜感激,
谢谢!
您需要使用 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
包含到您的模块中。
我有一个应用程序使用 Wordpress 插件 WP-API.
从另一个站点获取数据我正在起诉 AngularJS 然后显示此信息,我对 AngularJS 真的很陌生所以我的问题是从帖子中提取了正确的信息但是 HTML 标签显示如 <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 and the site where it's working http://dev.5874.co.uk/goshooting/regions/channel-islands/
如有任何帮助,我们将不胜感激,
谢谢!
您需要使用 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
包含到您的模块中。