Angular.js - Filtr w tagu img src

Question

Używamy Angular głównie do naszej formy wyszukiwania, która jest dość skomplikowana. Używamy Solr jako ramy wyszukiwania i uzyskać nasze wyniki wyszukiwania poprzez AJAX/JSONP, który działa doskonale.

W każdym wyniku wyszukiwania powinien znajdować się obraz, ale może się zdarzyć, że go nie ma. Używam filtra, aby zapobiec nieprzyjemnym "X" w Internet Explorerze, gdy nie ma img-URL w moim wyniku wyszukiwania.

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

Moja powiązana obraz wygląda to w kodzie źródłowym:

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

Jak powiedziałem, że informacje są dostarczane poprawnie, „problem” mam to, że Firebug wysyła żądanie GET z Src kątowy:

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

Link jest edytowany, więc nie będzie działał. Innego klienta zwariować;)

Czy ktoś ma doświadczenie z tym zachowaniem lub zna lepszy sposób ustawić filtry dla src-tagi?

Answer 1

Spróbuj wymienić src na ng-src, aby uzyskać więcej informacji, patrz: the documentation lub this post.

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

Korzystanie kątowa znaczników jak hash {{}} w atrybucie src nie działa rację: Przeglądarka pobierze z adresu URL z tekstem dosłownym hash {{}} aż kątowy zastępuje wyrażenie wewnątrz {{hash}}. Dyrektywa ngSrc rozwiązuje ten problem.