Javascript 将名称解析为url并附加到范围

好的，我有一个简单的angular应用程序，在一个控制器上，我将som项绑定到我的$scope，如下所示： $scope.items[{“name”：“stuff”，image；“imageName”…}

image属性是一个字符串，虽然api可以在异步http调用中解析为URL。我需要将解析的URL绑定到视图中的ng src

将名称解析为url的代码如下所示：

    BaasBox.getImageURI("testimage", {'resizeId' : 1})
      .done(function(res) {
        console.log("image URI is ", res['data']);
      })
      .fail(function(error) {
        console.log("error ", error);
      })

我的第一个想法是从图像上的ng src调用一个函数，然后返回结果，但这不能做到，因为这是一个异步调用。所以我的问题是：如何以平滑的方式获取视图的url，可以使用指令或过滤器吗

---

更新的尝试，这实际上有效（几乎…需要在图像显示前按fetch几次），但我确信这不是方法，我确信有一个简单的方法

控制器：

.controller('PlaylistsCtrl', function ($scope) {       
      $scope.GetImage = function(i,name){
            BaasBox.getImageURI(name, {'resizeId' : 1})
              .done(function(res) {
              $scope.playlists[i].img = res['data'];
              })
              .fail(function(error) {
                console.log("error ", error);
              })
  }   


   $scope.fetch = function () {   
      BaasBox.loadCollection("Playlists")
        .done(function (res) {
          $scope.playlists = res;
        })
        .fail(function (error) {
          console.log("error ", error);
        })
    }
  })

视图：

---

对于显示，我将使用视图模型存储异步响应，并使用ng src设置图像。因此，当返回图像uri时，视图将被更新。大致如下：

  .controller('PlaylistsCtrl', function ($scope) {

    $scope.playlists = [];

    $scope.fetch = function () {
      BaasBox.loadCollection("Playlists")
        .done(function (res) {
          $scope.playlists = res;
          resolveImageUrls($scope.playlists);
        })
        .fail(function (error) {
          console.log("error ", error);
        })
    }

    function resolveImageUrls(list) {
      angular.forEach(list, function (item, key) {
        BaasBox.getImageURI(item.image, { 'resizeId': 1 })
          .done(function (url) {
            item.img = url['data'];
            $scope.$apply();
          })
          .fail(function (error) {
            console.log("error ", error);
          })
      });
    }
  })

//指令模板

只需使用

ng src=“{uri}}”

。您可能还需要使用指令来控制

加载

事件，请参阅。问题是$scope.items中的每个元素都有自己的imagename（甚至多个图像名），需要解析并附加到该项$scope.items[0].url=$scope.items的解析值[0].image是否有方法向Items数组中解析为该Items图像url的每个元素添加方法？如果有多个Items，则应使用ng repeat并相应地构造视图模型。如果确实需要一个函数来获取图像url，则可以将其添加到对象中。是否可以显示一个示例？请参阅我的更新代码但这绝对不是我们要走的路。。。

<ion-view view-title="Playlists">
  <ion-content>
    <button ng-click="fetch()"  class="button button-full button-positive">Fetch</button>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists">
        {{playlist.name}}
        <img ng-src="{{playlist.img}}"></image>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

  .controller('PlaylistsCtrl', function ($scope) {

    $scope.playlists = [];

    $scope.fetch = function () {
      BaasBox.loadCollection("Playlists")
        .done(function (res) {
          $scope.playlists = res;
          resolveImageUrls($scope.playlists);
        })
        .fail(function (error) {
          console.log("error ", error);
        })
    }

    function resolveImageUrls(list) {
      angular.forEach(list, function (item, key) {
        BaasBox.getImageURI(item.image, { 'resizeId': 1 })
          .done(function (url) {
            item.img = url['data'];
            $scope.$apply();
          })
          .fail(function (error) {
            console.log("error ", error);
          })
      });
    }
  })

<div data-your-directive data-view-model="controller.viewModel"></div>

// Directive template
<div>
<img ng-src="{{viewModel.image}}" />
</div>