web-dev-qa-db-ja.com

Angular.js-imgsrcタグでフィルタリング

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

すべての検索結果に画像が含まれているはずですが、画像がない場合もあります。検索結果にimg-URLがない場合に、InternetExplorerで厄介な「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 like：

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

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

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

ajaxsolrangularjs
21
Hyque

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

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

Src属性で{{hash}}のようなAngularマークアップ）を使用すると正しく機能しません：ブラウザは、Angularは、{{hash}}内の式を置き換えます。ngSrcディレクティブはこの問題を解決します。

44
Gloopy