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; 
} 

然而，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。

我使用了sanitize模块：

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

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

Answer 1

当您从控制器中解析HTML，你必须使用$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);} 
    } 
]);