MEAN堆棧角度HTML <img> 標簽注入不起作用

Question

我是新手，所以我嘗試了一些新的方法來適應它。

我使用socket.io獲取圖像列表[car1 ... car5]，我想將它們動態注入到視圖中。

在我的HTML我有一個看起來像這樣：

<div id="section" ng-bind-html="HTML">
    </div>

在我的core.js角度腳本中，我有：

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

app.factory('socket', function () {
  var socket = io.connect('http://localhost:8080');
  return socket;
});

app.controller('TodoCtrl', function($scope, socket)
{
    socket.emit('images', {}); //send for a list of images
    socket.on('returnImages', function(data)
    {
        for(var i =1;i<=data.list.length;i++) 
        {
            $scope.HTML = '<img style="left:'+(i*50)+'px;" src="/images/'+data.list[i]+'"/>';
        }
        $scope.$digest();
    });
});

但這會引發錯誤：

Error: [$sce:unsafe] http://errors.angularjs.org/1.2.16/$sce/unsafe etc

我正在關注文檔，所以我不確定是否出了什么問題，我嘗試包括角度消毒，但我找不到CDN鏈接，但我一直收到404

Answer 1

您必須使HTML受信任

首先在控制器中注入$sce服務

像這樣

app.controller('TodoCtrl', function($scope, socket,$sce)
{

}

然后使您的HTML受信任

$scope.HTML = $sce.trustAsHtml('<img style="left:'+(i*50)+'px;" src="/images/'+data.list[i]+'"/>'); 

Answer 2

您需要將請求域添加到白名單

檢查此： 不安全的角度鏈接