Search code examples
javascriptangularjsrestangular

Angular data binding and promises handling

Im struggling small problem with handling promises. I'm trying to make an expandable table with simple info on grid and then more detailed if you click and expand it. And it works fine. My problem is when you expand grid for a moment (like 0.5-1s) you can see old attachment list (from previously inspected news) before restangular promise is resolved.

Here's my code until now: Controller and part of service(restangular): http://pastebin.com/ViBpXuhr

HTML code: http://pastebin.com/K9ZPWScc

Due to current datamodel, which I cannot really change I think I have to do this that way, or at least I don't have any other idea. So when user sees grid and clicks row he wants to inspect I run getAttList function with newsId as parameter and return via service list I need but there is a brief time when table is already expanded but user see completly no data (because he has not expanded anything earlier) or data from previously inspected news.

Typically I was handling promises with $q but in that case I'm not sure how I should do that.

Solution

  • In order to avoid showing data from previous inspected news, do $scope.attachments = null; every time the $scope.newsIdExpanded value changes. You can easily do that on the $scope.selectTableRow function since you have the previous ($scope.newsIdExpanded) and the new (newsId) selected IDs, just compare the two to see if they are different:

    if ($scope.newsIdExpanded != newsId) {
  $scope.attachments = null;
}

    Not showing anything while the content is being loaded is normal since the request is async. You could show, for example a loading icon while attachments == null.