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

您需要将请求域添加到白名单

检查一下：unsafe link in angular

MEAN堆栈角度html <img/>标记注入不起作用

2 个答案: