Angular.js Controller wird nach der Ansicht geladen

Question

Hier versuche ich die URL von jeder ID, die ich erhalte, aber die URL wird asynchron generiert, als Folge wird es Zeit zu generieren und ich bin nicht in der Lage zu setzen es in die Aussicht. Wie kann ich es machen warten, bis die Daten von PouchDB fetced und URL wird

erzeugt

Controller

$scope.getColour = function(id) { 
     var texture_array = []; 
     texture_array = photoList.data.economy.concat(photoList.data.luxury, photoList.data.premium); 
     var db = PouchDB('new_test4'); 
     var obj = {}; 
     var array = []; 
     var i; 
     // console.log(texture_array.length) 
     for (i = 0; i < texture_array.length; i++) { 
      //var id = texture_array[i].image_url; 
      if (texture_array[i].image_url == id) { 
       db.getAttachment(id, id, function(err, blob_buffer) { 
        if (err) { 
         return console.log(err); 
        } else { 
         var url = URL.createObjectURL(blob_buffer); 
         console.log(url); 
         return url; 
        } 
       }); 
      } 

     } 

    }; 

html

<div class="item" ng-repeat="photoOuterObj in remainingEconomyColour " ng-class=" $index? '' : 'active'"> 
    <div class="row" ng-repeat="photoInnerObj in photoOuterObj"> 
     <div class="premium-carousel-image"> 
      <a class="color-image"> <img src="{{getColour(photoInnerObj.image_url)}}" alt="Image" /></a> 
      <div class="ambience-button"> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

umrechnen getColor Funktion ein Versprechen zurückgeben:

$scope.getColourPromise = function(id) { 
    var texture_array = []; 
    texture_array = photoList.data.economy.concat(photoList.data.luxury, photoList.data.premium); 
    var db = PouchDB('new_test4'); 
    var obj = {}; 
    var array = []; 
    var i; 
    //Create deferred object 
    var defer = $q.defer(); 
    // console.log(texture_array.length) 
    for (i = 0; i < texture_array.length; i++) { 
     //var id = texture_array[i].image_url; 
     if (texture_array[i].image_url == id) { 
      db.getAttachment(id, id, function handler(err, blob_buffer) { 
       if (err) { 
        //return console.log(err); 
        //reject on error 
        defer.reject("db ERROR "+err); 
       } else { 
        var url = URL.createObjectURL(blob_buffer); 
        console.log(url); 
        //resolve with url; 
        defer.resolve(url); 
       } 
      }); 
     } 
    } 
    //return promise 
    return defer.promise; 
}; 

Da die getAttachment Methode, um die getHandler Funktion wird asynchron ausgeführt nach die getColour Funktion abgeschlossen ist, kann es keinen Wert zurück, aber es kann ein Zurückstellungs Objekt lösen.

Verwenden ng-init die URL zu holen und das ng-repeat Objekt Iterator anbringt:

<div class="row" ng-repeat="innerObj in photoOuterObj"> 
    <!-- use ng-init to do the fetch --> 
    <div ng-init="innerObj.urlObj = fetchURL(innerObj)"> 
     <a class="color-image"> <img ng-src="{{innerObj.urlObj.url}}" alt="Image" /></a> 
     <div class="ambience-button"> 
     </div> 
    </div> 
</div> 

Die Abruffunktion:

$scope.fetchURL = function(itemObj) { 
    var urlObj = {}; 
    urlObj.url = "default.jpg"; 
    var promise = $scope.getColourPromise(itemObj.image_url); 
    promise.then(function (url) { 
     urlObj.url = url; 
    }); 
    return urlObj; 
}); 

Die Abruf- kehrt zunächst ein Objekt mit der Eigenschaft url zu einer Standardgruppe Wert. Wenn das Versprechen aufgelöst wird, wird es auf den abgerufenen Wert gesetzt. Der Watcher erstellte die doppelte geschweifte Klammer {{ }} Ausdruck aktualisiert das DOM.

Vermeiden Sie die Verwendung asynchroner Funktionen in einer Interpolation {{ }}, da sie bei jedem Digest-Zyklus mehrfach aufgerufen werden.