Question

好的，所以我有一个简单的角度应用程序，在一个控制器上我有som项绑定到我的$ scope如下： $ scope.items [{ “名称”： “的东西，” 图像 “” imageName” ......}

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

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

    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，是否可以使用指令或过滤器？

更新尝试，这实际上有效（几乎......需要在图像显示之前按几次获取）但我确定这不是要走的路，有一种简单的方法我敢肯定。

控制器：

.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);
        })
    }
  })

查看：

<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}}
        {{GetImage($index,playlist.image)}} <!-- call to resolve url - should definitely not be here-->
        <img ng-src="{{playlist.img}}"></image>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

更新

这仍然是一个艰难的时刻。我现在正试图通过创建一个过滤器来解决它，该过滤器将名称解析为类似于此<img ng-srv="{{playlist.image | getImage}}"></img>的URL，但我无法弄清楚如何从过滤器中的异步调用返回任何内容。

另一个解决方案也有效，但它看起来仍然很可怕：S帮我Obi Wan Kenobi！

查看：

<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);
          })
      });
    }
  })

Answer 1

对于显示，我将使用视图模型来存储异步响应并使用ng-src来设置图像。因此，返回图像uri时将更新视图。有点像：

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

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

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

1 个答案: