Angular.js - img srcタグのフィルタ

Question

Angularは主に検索フォームに使用されていますが、かなり複雑です。 Solrを検索フレームワークとして使用し、AJAX/JSONPで検索結果を取得します。これは完全に機能します。

すべての検索結果に画像が存在する必要がありますが、存在しない可能性があります。 検索結果にimg-URLがない場合、Internet Explorerで厄介な "X"を防ぐためにフィルタを使用します。

angular.module('solr.filter', []). 
    filter('searchResultImg', function() {  
     return function(input) { 
      if (typeof(input) == "undefined") { 
       return "http://test.com/logo.png"; 
      } else { 
       return input; 
      } 
     }; 
}); 

マイリンクされた画像は、ソースコードに次のようになります。私が言ったように、

<a href="{{doc.url}}"><img src="{{doc.image_url | searchResultImg}}"/></a> 

に関する情報が正しく配信され、私が持っている「問題は」FirebugのがでGETリクエストを送信していることです角のあるsrcのように：

http://test.com/foldername/%7B%7Bdoc.image_url%20|%20searchResultImg%7D%7D 

リンクが編集されているため、動作しません。その他のフリークアウト;）

この動作の経験がある方、またはsrcタグのフィルタを設定する方が良いですか？

Answer 1

srcをng-srcに置き換えてください。詳しくは、the documentationまたはthis postを参照してください。

<a href="{{doc.url}}"><img ng-src="{{doc.image_url | searchResultImg}}"/></a> 

src属性に{{ハッシュ}}のような角度のマークアップを使用すると、 権利は動作しません：角度が置き換わるまで、ブラウザはリテラルテキスト {{ハッシュ}}とURLから取得します{{hash}}の中の式。 ngSrcディレクティブはこの問題を解決します。