Ilya Ilin Ilya Ilin - 3 months ago 17
AngularJS Question

ng-bind to value returned by promise resolve

I have angular service working with db, directive using method of this service and view where I need to show the value I get from db. I stuck on the moment where I need to bind value to view, first I tried to do it with controller (service->controller->view), but I couldn't bind value from view to controller one and realized that for asynchronously assigned value I need directive and its link function, I moved element into directive and tried to do it from there, but still no luck. So, I've got 2 questions:

Is my way of implementing this "AngularJS way"?

And if it is, how can I bind this value to view at last?

Here is the code (part of it, cropped for question):

Service:

var purchaseHistoryService = function ($q) {

this.getUserPurchases = function() {
var deferred = $q.defer();
Parse.Cloud.run('getUserPurchases').then(function(res) {
var purchases = [];

// take only part we need from purchase objects
if(res) {
res.forEach(function (purchase) {
purchases.push(purchase.attributes);
});
}
return deferred.resolve(purchases);
}, function(err) {
return deferred.reject(err);
});
return deferred.promise;
};
};

module.exports = purchaseHistoryService;


Directive:

var purchaseHistoryTable = function (purchaseHistoryService) {
return {
restrict: 'E',
link: function (scope) {

scope.purchases = purchaseHistoryService.getUserPurchases().then(function(res) {
console.log(res); // gives expected result, array of objects
return res;
}, function(err) {
console.error(err);
});
},
templateUrl: "purchaseHistoryTable"
};
};

module.exports = purchaseHistoryTable;


View:

.table--purchase-history
.table_cell-content_header--purchase-history(ng-bind="purchases") // check binding here, got '[object Object]'
.table_row--purchase-history(ng-repeat="purchase in purchases")
.table_cell--purchase-history-big
.table_cell-content--bought-packs
.table_cell-content_header--purchase-history(ng-bind="purchase.totalPrice")
.ver-line--purchase-history


Investigating issue I've found out that if I change directive like that:

var purchaseHistoryTable = function (purchaseHistoryService) {
return {
restrict: 'E',
link: function (scope) {
scope.purchases = 'example';
},
templateUrl: "purchaseHistoryTable"
};
};

module.exports = purchaseHistoryTable;


I've got 'example' in my view, which is ok, but when I add assigning to promise resolve value back, I've got
[object Object]
even if change return of resolve function to
return 'example';


And questions again:

Is my way of implementing this "AngularJS way"?

And if it is, how can I bind this value to view at last?

Answer

Just rewrite your link function like this :

link: function (scope) {
       purchaseHistoryService.getUserPurchases().then(function(res) {
            console.log(res); // gives expected result, array of objects
            scope.purchases = res;// <--- HERE COPY IN THE THEN
        }, function(err) {
            console.error(err);
        });
    },