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服务加载员工数据？如果是这样，$ resource服务将首先返回一个空对象，该对象将解释第一个请求。一旦接收到来自服务器的数据，该数据将被复制到先前空的对象中并触发绑定值的更新。在你的情况下，这将是img的ng-src，并将触发第二个请求。

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准备就绪时，图像将自动更改。

我刚刚在我的项目中做到了。

AngularJS图像多个请求

2 个答案: