resolve name to url and attach to scope

Question

Ok, so I have a simple angular app, on one controller i have som items bound to my $scope like so: $scope.items[{"name":"stuff,"image";"imageName"......}

The image property is a string that though a api can be resolved to a URL in a async http call. I need to bind the resolved url to the ng-src in a view.

The code to resolve the name to a url looks like this:

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

My first thought was to call a function from ng-src on the image and then return the result but this can not be done because it's a async call. So my question is: How to i get the url the the view in a smooth way, could a directive or a filter be used?

Updated attempt, this actually works (almost... need to press fetch a few times before the image shows) but I'm sure that this is not the way to go, there is a simple way I'm sure.

controller:

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

View:

<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>

Update

This is still givig me a hard time. I'm now trying to solve it by creating a filter that resolves the name to a url like this <img ng-srv="{{playlist.image | getImage}}"></img> but I can't figure out how to return anything from the async call in the filter..

Made another solution that also works, but it still looks horrible :S Help me Obi Wan Kenobi!

View:

<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>

Ctrl:

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

Just use `ng-src="{{uri}}"`. You might additionally want to use a directive to control the `load` event, see http://stackoverflow.com/questions/17884399/image-loaded-event-in-for-ng-src-in-angularjs. — masa, Dec 17 '15 at 21:26

ED92 · Answer 1 · 2015-12-17T23:26:42.840

0

For display I would use a view model to store the async response and use ng-src to set the image. Therefore the view will be updated when the image uri is returned. Something along the lines of:

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

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

edited Dec 17 '15 at 23:26

answered Dec 17 '15 at 23:20

ED92

11
4

The problem is that each element in $scope.items has it's own imagename (or even multiple image names) that needs to be resolved and attached to that item $scope.items[0].url = the resolved value of $scope.items[0].image – iCediCe Dec 18 '15 at 07:38
Is there a way to add a method to eache element in the Items array that resolves to that items image url? – iCediCe Dec 18 '15 at 08:19
If there are multiple items then you should use ng-repeat and structure your view model accordingly. If you do need a function to get the image url then you can add it to the object. – ED92 Dec 18 '15 at 08:32
Could you show an example? see my updated code that works but is definitly not the way to go... – iCediCe Dec 18 '15 at 08:44

resolve name to url and attach to scope

1 Answers1