21

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 が次のような Angular src で GET リクエストを送信することです。

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

リンクは編集されているため、機能しません。そうでなければ、顧客はびっくりします ;)

誰かがこの動作の経験があるか、src-tags のフィルターを設定するより良い方法を知っていますか?

4

1 に答える 1

44

詳細については、ドキュメントまたはこの投稿srcを参照してください。ng-src

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

src 属性で {{hash}} のような Angular マークアップを使用すると正しく動作しません。ブラウザは、Angular が {{hash}} 内の式を置き換えるまで、リテラル テキスト {{hash}} を使用して URL から取得します。ngSrc ディレクティブはこの問題を解決します。

于 2012-10-30T16:51:18.067 に答える