約束からの角度アップデートng-src

Question

ロゴ（.png）を取得するAPI関数があります。基本認証ヘッダーを送信する必要があるため、pngへの直接URLは使用できません。 APIはすでにこのAPIを処理しています。

どのようにng-src属性を更新できますか？ APIは有望です。

実際の問題は、それぞれにロゴをフェッチする必要がある複数の項目があるテーブルがあるため、$ scopeに変数を追加できないということです。どんな意見？

Answer 1

@ Yury Tarabankoのコメントでは、APIを使用してデータを取得し、それをオブジェクトに戻すことができます。

<div ng-repeat="obj in list"> 
    <img ng-init="getImgSrc(obj)" ng-src="{{obj.imgSrc}}"> 

お使いのコントローラのメソッドは、このようなものになるだろう：あなたは、私は完全にdemoを偽造使用している任意のコードを投稿していないので

$scope.getImgSrc = function(obj) 
{ 
    $http.get(obj.imgUrl, <params>) 
    .then(function(rsp){ obj.imgSrc = rsp; }) 
} 

Answer 2

。

コントローラー・コード（これは、より良いサービスに移動する必要があります）

app.controller('ViewModel', ['$http', function($http) { 
    // async function that loads and saves image 
    const loadImg = item => { 
    $http.get('https://randomuser.me/api/').then(res => { 
     const user = res.data.results[0] 
     item.logo = user.picture.medium 
    }) 
    } 


    // faking items 
    this.items = Array.apply(null, new Array(10)).map((_, i) => { 
    const item = { 
     id: i, 
     title: `Item ${i+1}` 
    }; 

    loadImg(item); // run loading for every item. 
    return item; 
    }) 
}]) 

テンプレート

<table ng-controller="ViewModel as vm"> 
    <tr ng-repeat="item in vm.items track by item.id"> 
    <td><img ng-src="{{item.logo}}"/></td> 
    <td>{{item.title}}</td> 
    </tr> 
</table>