为什么我清理过的 img 标签是空的？

Question

以下代码是一个使用参数的函数。当我警告变量时，字符串完全按照它应该的方式显示。

$scope.createMap = function(size,scale,center,zoom,style){
     $scope.myMap = "<img ng-src='https://maps.googleapis.com/maps/api/staticmap?size="+size+"&scale="+scale+"&center=IL"+center+"&style="+style+"&zoom="+zoom+"'>";
     alert($scope.myMap);

     return;
}

但是，在 this 绑定到的 HTML 页面上：

<div ng-bind-html="myMap" id="myStaticMap">
    MAP GOES HERE
</div>

该区域是空的，当我“检查元素”时有<img></img>，所以它正在注册它是一个图像，但是空的。

同样的事情发生在这里：

$scope.displayPage = function(page){
        $scope.siteName = $scope.names[page].PageName;
        $scope.logo = "<img ng-src='"+$scope.names[page].logo+"'>";
        alert($scope.logo);

        $scope.createMap($scope.names[page].Size,$scope.names[page].Scale,$scope.names[page].Center,$scope.names[page].Zoom,$scope.names[page].Style);}

参数的使用方式略有不同。但同样，$scope.logo 的警报正在警告正确的字符串，但有 <img></img> 应该绑定它。 $scope.siteName 绑定得很好，但是它没有绑定任何 HTML。

我正在使用清理模块：

var app = angular.module('myApp', ["ngSanitize"]);

（脚本在我的外部参考列表中最后放置）

所以我不确定这里出了什么问题。

---

更新：所以我在下面的回答中提出了建议，当我将 ng-src 更改为 src 时它正在工作，这太棒了。但是，我在 Web 控制台中收到以下错误，有人知道为什么吗？无论我使用ng-src 还是src，我都明白：

"错误：html.indexOf 不是函数 htmlParser@http://code.angularjs.org/1.0.3/angular-sanitize.js:205:12 $sanitize@http://code.angularjs.org/1.0.3/angular-sanitize.js:119:1 ngBindHtmlWatchAction@http://code.angularjs.org/1.0.3/angular-sanitize.js:420:1 Yd/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:110:371 Yd/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:113:360 米@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:72:452 w@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:77:463 是的/https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:79:24

var app = angular.module('myApp', ["ngSanitize"]);
app.controller('customersCtrl', function($scope, $http, $sce) {

Answer 1

当您从控制器中解析 html 时，您必须使用 angular 的 $sce 依赖项，以便将 html 标记为“受信任”：

angular.module("yourModule").controller("yourController",
    ["$scope", "$sce", function ($scope, $sce) {
        $scope.displayPage = function(page){
        $scope.siteName = $scope.names[page].PageName;
        $scope.logo = $sce.trustAsHtml("<img ng-src='"+$scope.names[page].logo+"'>");
        alert($scope.logo);
        $scope.createMap($scope.names[page].Size,$scope.names[page].Scale,$scope.names[page].Center,$scope.names[page].Zoom,$scope.names[page].Style);}
    }
]);