Question

我在angularJS应用中使用Stack Overflow API，其中一些标题包含'而不是单引号图标'

E.g：

title: "Can&#39;t bind to &#39;ngModel&#39; since it isn&#39;t a known property of &#39;input&#39;"

如何在将其拉入ng-repeat之前进行转换？

我已经环顾四周，但不幸的是，没有一个答案对我有用。我在.replace中尝试了{{question.title}}，并在控制器中尝试了一种方法。

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

loadFeed.controller('feedController', ['$scope', '$http', function($scope, $http) {

$scope.questions = [];

$http({
    method: 'GET',
    url: 'https://api.stackexchange.com/2.2/questions?&order=desc&sort=votes&tagged=angular&site=stackoverflow'
}).then(function(feed) {

    console.log('success');
    console.log(feed);

    $scope.questions = feed.data.items;


},function(error) {
    console.log('error');
    console.log(error);
}); 

}]);

我想在{{question.title}}

中更新此内容

<div ng-repeat="question in questions" ng-show="!!questions.length" class="question-list">
    <h2>
    <a ng-href="{{question.link}}" title="{{question.title}}" target="_blank">{{question.title}}</a>
    </h2>
</div>

Answer 1

您可以使用ngBindHtml directive以及$ sce和trustAsHtml方法。

使用Javascript：

(function(angular) {
      'use strict';
    var loadFeed = angular.module('loadFeed', []);

    loadFeed.controller('feedController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

    $scope.questions = [];
    $scope.trustAsHtml = $sce.trustAsHtml;

    $http({
        method: 'GET',
        url: 'https://api.stackexchange.com/2.2/questions?&order=desc&sort=votes&tagged=angular&site=stackoverflow'
    }).then(function(feed) {

        console.log('success');
        console.log(feed);

        $scope.questions = feed.data.items;


    },function(error) {
        console.log('error');
        console.log(error);
    }); 

    }]);

    })(window.angular);

HTML：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-bind-html-production</title>


  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="loadFeed">
  <div ng-controller="feedController">
 <div ng-repeat="question in questions" ng-show="!!questions.length" class="question-list">
    <a ng-href="{{question.link}}" ng-bind-html="trustAsHtml(question.title)" target="_blank"></a>
</div>
</div>
</body>
</html>

（也为你的问题更新了plunkr）请参阅帮助页面上的示例改编的Plunker

Answer 2

使用ng-bind-html指令将内容绑定到HTML元素。

<强> DEMO

angular.module('myapp', ['ngSanitize'])
.controller('foo', function($scope) {
    $scope.title = "Can&#39;t bind to &#39;ngModel&#39; since it isn&#39;t a known property of &#39;input&#39;";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<div ng-app="myapp" ng-controller="foo">   
    <div ng-bind-html="title"></div>  
</div>

AngularJS - 如何转换＆＃39;在JSON中单引号

2 个答案: