AngularJS Images несколько запросов

Question

В настоящее время я разрабатываю приложение AngularJS.

Все работает отлично, за исключением загрузки изображения.

Я использовал следующий вызов, на мой взгляд:

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

Теперь самое странное, что есть 2 запросы обстреляли:

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

и

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

Вы загружая данные сотрудников с помощью службы ресурса $? Если это так, служба $ resource сначала вернет пустой объект, который будет объяснять первый запрос. Как только данные с сервера будут получены, эти данные будут скопированы в ранее пустой объект и вызовет обновление связанных значений. В вашем случае это будет ng-src из img, и это вызовет второй запрос.

Answer 2

Если вы не хотите использовать успех обратного вызова из $ HTTP вы можете объявление наблюдателем на employee.lastName:

Сначала выберите изображение по умолчанию в контроллере:

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

Используйте его на ваш взгляд:

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

Тогда объявление Бодрствующего на employee.lastName:

$scope.$watch('employee.lastName', function(lastName) { 
     if (lastName) { 
      $scope.defaultPicture = '/MyContext/content/img/views/portrait/'+lastName+'.jpg; 
     } 
    }); 

Выполнено, чтобы получить изображение по умолчанию, которое будет кэшироваться браузером, и когда ресурс employeeService будет готов, изображение автоматически изменится.

Я просто сделал это в своем проекте.