用異步數據編寫角度指令

我在寫一個使用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過程的初始階段爲模板中的img標籤定義了src屬性，因此會調用該屬性並獲得以下內容。

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

我仍然在過程有點含糊角經歷，因爲它是把一個指令在一起，但我想我明白，最初爲NG-重複區域存在的這個區域的內容的拷貝一旦填充了images綁定，就會被填充。

無論如何，任何人都可以建議我怎麼能解決這個問題？

來源

2013-08-25 markstewie

嘗試使用[ngSrc]（http://docs.angularjs.org/api/ng.directive:ngSrc） – madhead

圖例...謝謝！那樣做了。 – markstewie

所以要澄清...這是通過改變指令的template部分解決了......

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

謝謝！ @madhead。

來源

2013-08-25 10:29:27 markstewie

如果您的標記比幾個元素更復雜，您可能還想查看['templateUrl']（http://docs.angularjs.org/guide/directive）與'template'。 –

用異步數據編寫角度指令

回答

相關問題