Angular.js - img src 태그의 필터

Angular.js - img src 태그의 필터

우리는 검색 양식에 주로 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-tag에 대한 필터를 설정하는 더 나은 방법을 아는 사람이 있습니까?

교체 시도src와 함께ng-src자세한 내용은 설명서 또는 이 게시물을 참조하십시오.

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

src 특성에 {{hash}}와 같은 Angular 마크업을 사용하면 제대로 작동하지 않습니다.Angular가 {{hash}} 안의 식을 대체할 때까지 브라우저는 URL에서 문자 텍스트 {{hash}}(으)로 가져옵니다.ngSrc 명령어가 이 문제를 해결합니다.

언급URL : https://stackoverflow.com/questions/13143849/angular-js-filter-in-img-src-tag