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)

imagesAngular がディレクティブをまとめるプロセスについてはまだ少し曖昧ですが、最初は ng-repeat 領域の場合、この領域のコンテンツのコピーがバインディングで満たされるようになっていることを理解していると思います。が設定されています。

とにかく、これを回避する方法を教えてもらえますか?

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 に答える