AngularJS圖像多個請求

我目前正在開發一個AngularJS應用程序。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();

來源

2013-03-08 mooonli

你可以設置一個plunker。這應該工作。 – Stewie 2013-03-08 13:14:55

您是否使用$資源服務加載的員工數據？如果是這樣，$資源服務將首先返回一個空的對象，這將解釋第一個請求。一旦收到來自服務器的數據，該數據將被複制到先前的空對象中並觸發綁定值的更新。在你的情況下，這將是img的ng-src，並會觸發第二個請求。

來源

2013-03-08 14:09:07

是的，我正在使用資源。我已將它們添加到我的第一篇文章中。什麼是替代方案？或者如何避免2個電話？ – mooonli 2013-03-08 14:28:52

您可以預先加載服務調用中的圖像。像這個例子一樣：http://rabidgadfly.com/2013/03/super-easy-angular-image-gallery/ – Sharondio 2013-03-08 19:41:22

如果你不想使用的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準備就緒後，圖像將自動更改。

我剛剛在我的項目中做過。

來源

2013-07-08 13:48:35

AngularJS圖像多個請求

回答

相關問題