动态创建的地图触发角度警告

Question

在 Angular 中，我想根据输入的地址动态创建地图。我已经在 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] 插值时出错：严格 上下文转义不允许连接多个的插值 需要可信值时的表达式。看 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。