0

我目前正在开发一个 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();
4

2 回答 2

0

如果您不想使用 $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-08T13:48:35.297 回答
0

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

于 2013-03-08T14:09:07.967 回答