如何使用 $sce angularJS 1.6 清理未找到的 img

Question

我从 API 服务获取 html 代码并使用 ng-bind-html 将其绑定到 div，但有时我会得到像 http://t1.gstatic.com/images?q=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 这样不存在的图像，我想将其删除。因此，我使用 $sce.trustAsHtml 函数将其删除，但它不起作用。

<div ng-repeat="output in data">
<p ng-bing-html=$ctrl.getHtml(output)></p>
</div>

在我的控制器中

function _getHtml(output)
{
   return $sce.trustAsHtml(output);
}

提前致谢

Answer 1

查看我的解决方案以解决您的问题：

<div ng-repeat="output in data">
     <p ng-bing-html="getOutputElement(output)"></p>
</div>

getOutputElement 定义如下：

$scope.getOutputElement = function (output) {
   var ele = document.createElement('div');
   ele.innerHTML = output;
   var imgName = ele.getElementsByTagName('img')[0];
   // If img found, then check with an http GET status code comparison with 200
   if (imgName) {
       var imgValue = imgName.getAttribute("src");
       var request = new XMLHttpRequest();
       request.open('GET', imgValue, false);
       request.send(null);

       if (request.status === 200) {
           // html string with img ele and url is valid -> return the string
           return $sce.trustAsHtml(output);
       }
       // html string with img ele but img url not valid -> return what you want
       // for example you can remove img element and keep other html then return string without img
       imgName.remove();
       return $sce.trustAsHtml(ele.innerHTML);
   }
   // html string without img ele
   return $sce.trustAsHtml(output);
};