View not rendering until something is clicked on


#1

Hi, I have an issue where the view is empty until I for example click the menu icon. When I click it, the content gets rendered. It doesn’t always happen. There are no errors. How can I debug this?

The only new here is that all API calls are made with:

new Promise(function(resolve, reject)  { $http().success(function() resolve() ).error(function() { reject() ) });

Can this cause Ionic or AngularJS to throw a fit regarding DOM updates?


#2

Here’s some more code used in the controller. Anyone see an issue?

var categoryId = $rootScope.organization.tracks_main_category_id;

$scope.isTopLevel = true;
$scope.getCategories = function() {
    return new Promise(function(resolve, reject) {
        Api.getCategories('tracks', categoryId).then(function (response) {
            $scope.total_count = response.total_count;
            $scope.categories = response.data;
            resolve(true);
        }).catch(function(err) {
            reject(err);
        });
    });
};

$scope.getCategories();

#3

So, the only workaround so far is to use

$scope.$apply()

… inside then() …

But can someone explain why this occurs? Race condition? And still, why?

Should I not mix regular javascript promises with how Ionic / AngularJS does things?


#4

why do you are wrapping everything in a new Promise()?
you api call already a promise?

And you should use then $q from angularJS and please use never $scope.$apply if you do not know, what you can destroy with that. Wrap your scope-changes in $timeout…

But in your case… you do not need any $timeout or $apply.


#5

The API service itself is promise based, correct. Also with new Promise(). Looks cleaner I thought.

Then I have wrapped the API calls in the controller within a new Promise. Reason for that is that I reuse parts of the controller code in a refresAction() function that also needs a then() to do stuff after refresh of page.

So maybe the mix of Javascripts own Promise function with the AngularJS $q version is not a good mix…


#6

I switched out all of my new Promise(function(resolve, reject) to $q(function(resolve, reject)) and removed $scope.$apply() and it all seem to work now as expected. Greatness. Thx.