Question

我正在编写一个使用Instagram API的小应用程序。我正在尝试编写一个指令来显示登录用户图像的列表。我有一个后端api调用Instagram 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绑定后。

无论如何，任何人都可以建议我如何解决这个问题？

Answer 1

所以要澄清......这是通过将指令的template部分更改为......

来解决的

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

谢谢！ @madhead。

用异步数据编写一个角度指令

1 个答案: