AngularJS 이미지 복수 요청

Question

현재 AngularJS 응용 프로그램을 개발 중입니다.

이미지를로드하는 것 외에는 모든 것이 잘 작동합니다.

http://localhost:8080/MyContext/content/img/views/portrait/.jpg

및

: 발사 2 개 요청이 있다는 것을

<img ng-src="img/views/portrait/{{employee.lastName|lowercase}}.jpg" title="{{employee.lastName}}"/>

이제 이상한 일이있다 :

나는 내보기에 다음 전화를 사용했다 http://localhost:8080/MyContext/content/img/views/portrait/example.jpg

첫 번째 값은 employee.lastName에 대한 값이 비어 있습니다. ng-src 지시문을 사용하고 있지만 왜 이런 일이 발생하는지 설명 할 수 없습니다.

아이디어가 있으십니까?

미리 도움을 주셔서 감사합니다.

내 자원 코드 내가 전화를 컨트롤러에

var employeeService = $resource('/MyContext/rest/employees/:employeeId', {}, {}); 
employeeService.findById = function(id) { 
    return employeeService.get({employeeId:id}); 
}; 

:

$scope.employees = EmployeeService.findAll(); 

Answer 1

당신이 $ 자원 서비스를 사용하여 직원 데이터를 로딩하고 있습니까? 그렇다면 $ 리소스 서비스는 첫 번째 요청을 설명 할 빈 개체를 먼저 반환합니다. 서버의 데이터가 수신 되 자마자 그 데이터는 이전에 비어있는 객체로 복사되고 바인딩 된 값의 업데이트를 트리거합니다. 귀하의 경우에 그것은 img의 ng-src가되며 두 번째 요청을 트리거합니다.

Answer 2

당신이 광고 employee.lastName에 감시자 수있는 $ HTTP의 성공 콜백을 사용하지 않으려면 :

먼저 컨트롤러의 기본 사진을 선택합니다

$scope.defaultPicture = '/MyContext/content/img/views/portrait/default.jpg' 

를 사용하여

<img ng-src="{{ defaultPicture }}" title="{{ employee.lastName }}"/> 

다음

광고 employee.lastName에 감시자 :

보기에

완료, 브라우저에서 캐시 할 기본 그림을 가져 오도록 호출이 있으며 employeeService 리소스가 준비되면 이미지가 자동으로 변경됩니다.

방금 ​​프로젝트에서 사용했습니다.