3

我正在编写一个使用 Instagram API 的小应用程序。我正在尝试编写一个指令来显示登录用户图像的列表。我有一个调用 Instagram API 并返回结果的后端 api。

.directive('userPhotos', function($http)
{
    return {
        restrict: 'E',
        template:   '<ul class="user-photos">'
                        +'<li ng-repeat="image in images">'
                            +'<img src="{{image.images.low_resolution.url}}">'
                        +'</li>'
                    +'</ul>',
        replace: true,
        controller: function($scope, $element, $attrs){

            $scope.images;
            $scope.serviceURL = "/api/photos/"+$attrs.photosPerLoad;

            $scope.loadPhotos = function()
            {
                $http.get(this.serviceURL)
                    .success(function(response){
                        $scope.images = response.data;
                    })
                    .error(function(response){
                        // show error
                    });
            }

        },
        link: function($scope, element, attribute){
            $scope.loadPhotos();
        }
    }
})

这样做的原因是，一旦 API 调用的结果完成，它就会根据需要显示图像。但是，由于我在 Angular 过程的初始阶段为模板中src的标记定义了一个属性，因此我得到了以下信息。img

GET http://myapp.dev/%7B%7Bimage.images.low_resolution.url%7D%7D 500 (Internal Server Error)

我对 Angular 在将指令放在一起时所经历的过程仍然有点模糊，但我想我理解最初，对于 ng-repeat 区域，该区域的内容的副本会在images绑定后被填充被填充。

无论如何，谁能告诉我如何解决这个问题？

4

1 回答 1

3

所以澄清一下...这是通过template将指令的一部分更改为...来解决的

template:   '<ul class="user-photos">'
                +'<li ng-repeat="image in images">'
                    +'<img ng-src="{{image.images.low_resolution.url}}">'
                +'</li>'
            +'</ul>',

谢谢！@疯头。

于 2013-08-25T10:29:27.500 回答