关于angularjs：为什么我的清理过的img标签是空的？


Why is my sanitized img tags coming up empty?

以下代码是一个使用参数的函数。当我警告变量时，字符串显示的正是它应该的样子。

1
2
3
4
5
6
$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;
}

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

1
    MAP GOES HERE

这个区域是空的，当我"检查元素"时，有一个，所以它注册的是一个图像，但它是空的。

这里也发生了同样的事情：

1
2
3
4
5
6
$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的警告再次警告正确的字符串，但是在中应该绑定它。$scope.siteName被绑定得很好，但是之后，它就不绑定任何HTML了。

我正在使用"消毒"模块：

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

(脚本放在外部引用列表的最后一个位置)

所以我不知道这里出了什么问题。

更新：所以我在下面的回答中做了这个建议，当我把ng-src改成src的时候，它是有效的，所以这太棒了。但是，我在我的Web控制台中得到了下面的错误，有人知道为什么吗？无论是使用ng-src还是src，我都能理解：

"Error: html.indexOf is not a function
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
m@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
ye/https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:79:24

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

当您从控制器中解析HTML时，您必须从角度使用$sce依赖项，以便将HTML标记为"可信的"：

1
2
3
4
5
6
7
8
9
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);}
    }
]);
相关讨论