3

我正在尝试创建一个通讯录，其中每个人都可以拥有一张照片。因为我想在获取照片之前显示联系人，所以我会写类似

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

我会尝试调用我范围内可用的 get_photo(person) 。

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

这不起作用，因为它将函数绑定到 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";
};

有没有更简单/更清洁的方法来做同样的事情？我还创建了一个 jsFiddle：http: //jsfiddle.net/V4Mss/

非常感谢您的反馈！

t00f

4

1 回答 1

3

您的最后一个示例看起来不错，但这是另一个选项，可以使视图更清晰，并且不会导致 double $digest。从每个元素中删除初始化函数并将该函数用作 getter。

HTML

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

JavaScript

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()}];

});

这是一个小提琴

于 2013-06-16T02:36:23.777 回答