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。

我正在使用清理模块：

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

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

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

更新：所以我在下面的回答中提出了建议，当我将ng-src更改为src时，它正在运行，因此非常棒。但是，我在我的网络控制台中收到以下错误，有人知道为什么吗？无论我使用ng-src还是src：

，我都明白了

“错误：html.indexOf不是函数的HTMLParser @ this page $ @的sanitize http://code.angularjs.org/1.0.3/angular-sanitize.js:205:12 ngBindHtmlWatchAction @ http://code.angularjs.org/1.0.3/angular-sanitize.js:119:1 。YD /这$ gethttps：//ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js：110：371 。YD /这$ gethttps：//ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js：113：360 米@ http://code.angularjs.org/1.0.3/angular-sanitize.js:420:1 瓦特@ https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:72:452 也/ 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);}
    }
]);

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

1 个答案: