動的に作成されたマップトリガ警告が角度で表示される

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

はその後ように、それをパイプ：

すでに確立されているURLを使用しますがいない場合は動作します

| trustAsResourceUrl}} 

私はアドレスからURLを形成しようとしているからです。

Error: [$interpolate:noconcat] Error while interpolating: Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required. See 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}}">

はあなただけitem.addressではなく、全体srcを更新する必要があります：あなたはスコープ上で直接使用したい文字列を作成する必要があります。