Question

在角度中我想根据输入的地址动态创建地图。我在VueJS中成功完成了这项工作。但是在角度上会触发安全警告。

HTML：

<iframe
    ng-src="https://maps.google.com/maps?&amp;q={{encodeURIComponent(item.address)}}&amp;output=embed"
    allowfullscreen>
</iframe>

我尝试过创建以下内容：

app.filter('trustAsResourceUrl', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsResourceUrl(val);
};

然后如此管道：

| trustAsResourceUrl}}

如果使用已经建立的URL但是没有，因为我正在尝试从地址形成URL。我得到以下内容：

错误：[$ interpolate：noconcat]插值时出错：严格 Contextual Escaping不允许连接多个插值需要可信值时的表达式。看到 http://docs.angularjs.org/api/ng.$sce

VueJS非常简单，但我不能在这个项目中使用它。如果它提出任何想法，我会把它包括在内：

methods: {
    getmap: function(){
        setTimeout(function () {
            const searchInput = document.getElementById('searchTextField');
            let addr = searchInput.value; 
            let embed = "<div class='form-group'><label for='exampleInputPassword1'>Map Preview</label><iframe frameborder = '0' scrolling= 'no' marginheight= '0' marginwidth= '0' src= 'https://maps.google.com/maps?&amp;q=" + encodeURIComponent(addr) + "&amp;output=embed' > </iframe></div>";

      $('.place').html(embed); }, 200)
    },

Answer 1

基本上你不能使用这个过滤器。您必须在范围上创建要直接使用的字符串：

this.src = $sce.trustAsResourceUrl("https://maps.google.com/maps?q="
   + encodeURIComponent(item.address) + "&output=embed");

然后<iframe ng-src="{{$ctrl.src}}">

您必须更新整个src，而不仅仅是item.address。

角度为

1 个答案: