Angularjs Angular：如何在ng repeat循环中通过XHR请求加载图像

我正在尝试创建一个联系人簿，其中每个人都可以有一张照片。 因为我想在获得联系人照片之前显示联系人，所以我会写以下内容

<ul>
    <li ng-repeat="person in persons">{{person.firstname}} {{persone.lastname}}</li>
</ul>

{{person.firstname}{{persone.lastname}}

我会试着打电话给我范围内的一个有照片的人

<ul>
    <li ng-repeat="person in persons">{{person.firstname}} {{persone.lastname}}
    <img ng-src="{{get_photo(person)}}" />
    </li>
</ul>

{{person.firstname}{{persone.lastname}}

这不起作用，因为它将函数绑定到ng src，并在每次调用ng repeat时调用get_photo

我最后尝试在初始化DOM元素时调用get_photo，并将结果存储在特定的属性photo中

<ul>
    <li ng-repeat="person in persons">{{person.firstname}} {{persone.lastname}}
    <img ng-init="get_photo(person)" ng-src="{{person.photo}}" />
    </li>
</ul>

$scope.get_photo = function (person) {
    // Simple example; I will try to get an image through xhr request later...
    person.photo = "http://img.blogduwebdesign.com/benjamin-sanchez/737/AngularJS.jpg";
};

{{person.firstname}{{persone.lastname}}


$scope.get_photo=功能（个人）{
//简单的例子；稍后我将尝试通过xhr请求获取图像。。。
person.photo=”http://img.blogduwebdesign.com/benjamin-sanchez/737/AngularJS.jpg";
};

有没有更简单/更干净的方法来做同样的事情？ 我还创建了一个JSFIDLE：

非常感谢您的反馈

---

t00f

您的上一个示例看起来不错，但这里有另一个选项，它可以使视图更清晰，并且不会导致双

$digest

。从每个元素中删除初始化函数，并将该函数用作getter

HTML

<img ng-src="{{person.photo}}" />

---

您可以使用

ng src=“{{get_photo（person）}}”

-如果您这样做，您将得到额外的循环：感谢您的反馈！我喜欢更干净的方法；）

myapp.controller('controller', function ($scope) {
    $scope.count = 0;
    $scope.get_photo = function (person) {
        return "http://img.blogduwebdesign.com/benjamin-sanchez/737/AngularJS.jpg";
    };
    $scope.persons = [{firstname:"toto", lastname:"TOTO", photo:$scope.get_photo()},
                      {firstname:"tata", lastname:"TATA", photo:$scope.get_photo()},
                      {firstname:"titi", lastname:"TITI", photo:$scope.get_photo()}];

});