AngularJS镜像多个请求

AngularJS Images multiple Requests

本文关键字：请求 镜像 AngularJS      更新时间：2023-09-26

我目前正在开发一个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指令。

任何想法?

提前感谢您的支持。

My Resource Code

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

我调用:

$scope.employees = EmployeeService.findAll();

是否使用$resource服务加载员工数据?如果是这样，$resource服务将首先返回一个空对象来解释第一个请求。一旦接收到来自服务器的数据，该数据将被复制到先前的空对象中，并触发对绑定值的更新。在您的示例中，这将是img的ng-src，它将触发第二个请求。

如果你不想使用$http的成功回调，你可以在employee上添加一个监视器。姓:

首先在控制器中选择一个默认图片:

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

在你的视图中使用它:

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

然后在员工上添加一个观察者。姓:

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

完成后，将调用获取默认图片，该图片将被浏览器缓存，当资源employeeService准备好时，图像将自动更改。

我刚在我的项目中做过。

相关文章：