Question

我尝试使用angular-js创建网站。我使用rest api调用来获取数据。我使用ngSanitize作为来自其他呼叫的数据包括html字符。即使我在我的视图中使用ng-bind-html也没有删除html标签。我的代码中有什么错误。任何人都可以帮助我

＆＃13;

var app = angular.module('app',['ngSanitize','ui.bootstrap']);
app.controller("ctrl",['$scope','$http','$location','$uibModal',function($scope,$http,$location,$uibModal,){
  //here im making my rest api call and saving the data in to $scope.items;
  }]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <div class="hov" ng-repeat ="item in items">
  <br/>
  <div>
    <hr class="divider" style="overflow:auto;">
      <ul>
        <li style="font-family: Arial, Helvetica, sans-serif;font-weight:900px;">
          <h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name"></span></h3>
        </li>
        <li>
          <h4>Description: <span ng-bind-html="item.description"></span></h4>
        </li>
      </ul>
    </div>
  </div>
</body>

＆＃13;

Answer 1

所以你想允许HTML标签或拒绝它们吗？

如果您希望在来自服务器的数据中转义html，只需使用ng-bind即可。它会将<替换为<，将>替换为>，从而显示HTML标记而不是计算它们。

如果要完全删除任何HTML标记

试试此过滤器

filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  }
);

然后在你的HTML中：

<h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name | htmlToPlaintext"></span></h3>

如果您信任源并希望计算它发送给您的HTML

您可以使用此过滤器

app.filter('trusted', function($sce){
        return function(html){
            return $sce.trustAsHtml(html)
        }
     });

然后在你的HTML中：

<h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name | trusted"></span></h3>

和

<h4>Description: <span ng-bind-html="item.description | trusted"></span></h4>

Answer 2

我在一段时间之前遇到了同样的问题，然后我为这个问题创建了一个过滤器，你可以使用这个过滤器来清理你的html代码：

app.filter("sanitize", ['$sce', function($sce) {
    return function(htmlCode) {
        return $sce.trustAsHtml(htmlCode);
    }
}]);

在html中你可以像这样使用：

<div ng-bind-html="businesses.oldTimings | sanitize"></div>

commerce.oldTimings是$ scope变量，具有字符串描述或具有带html标记的字符串，$ scope.businesses.oldTimings是您用于该html的特定控制器的一部分。

见快照：

您可以使用limitHtml过滤器执行相同操作：

app.filter('limitHtml', function() {
    return function(text, limit) {
        var changedString = String(text).replace(/<[^>]+>/gm, '  ');
        var length = changedString.length;
        return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString;
    }
});

然后你可以在你的html中添加过滤器：

<p class="first-free-para" ng-bind-html="special.description| limitHtml : special.description.length | sanitize">

希望它对您有用。

使用ng-bind-html时出现问题

2 个答案:

如果要完全删除任何HTML标记

如果您信任源并希望计算它发送给您的HTML