cgross / angular-busy

Show busy/loading indicators on any element during $http requests (or any promise).
http://cgross.github.io/angular-busy/demo
MIT License
1.44k stars 256 forks source link

Upgrade to 4.1.1 causes "cgBusy expects a promise" #48

Open stephanie-dm opened 9 years ago

stephanie-dm commented 9 years ago

After upgrading from angular-busy 4.1.0 to 4.1.1 (while still depending on angular 1.2.26), we get the following error on pages where angular-busy is used:

Error: cgBusy expects a promise (or something that has a .promise or .$promise 
addPromiseLikeThing@http://localhost:9000/bower_components/angular-busy/dist/angular-busy.js:69:17 tracker.reset/<@http://localhost:9000/bower_components/angular-busy/dist/angular-busy.js:22:17 forEach@http://localhost:9000/bower_components/angular/angular.js:325:9 tracker.reset@http://localhost:9000/bower_components/angular-busy/dist/angular-busy.js:18:13 .link/<@http://localhost:9000/bower_components/angular-busy/dist/angular-busy.js:188:29 $watchCollectionAction@http://localhost:9000/bower_components/angular/angular.js:12412:13 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:9000/bower_components/angular/angular.js:12541:23 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:9000/bower_components/angular/angular.js:12806:13 ngEventHandler/<@http://localhost:9000/bower_components/angular/angular.js:19141:17 jQuery.event.dispatch@http://localhost:9000/bower_components/jquery/jquery.js:4676:1 jQuery.event.add/elemData.handle@http://localhost:9000/bower_components/jquery/jquery.js:4360:1

We didn't get this error with 4.1.0, so 4.1.1 doesn't seem backwards compatible to me :) I think we're getting this error because when we use cg-busy="myPromise", myPromise is often still undefined at page load (it only gets initialized when we click some button). But then again, this did work before the upgrade.

cgross commented 9 years ago

I've tried but I can't reproduce this problem. With angular 1.2.26 and setting the promise to null or undefined - I cannot reproduce the error you're seeing.

Perhaps you can investigate more on your end or provide a reproducible example using plnkr or similar service.

stephanie-dm commented 9 years ago

I've investigated this problem a little further and I've come to a different conclusion: the problem I'm seeing occurs everywhere I use an Angular resource as a promise for cgBusy.

In my controller I have the following code: $scope.dossiers = Dossier.query();

In my HTML, I do this: <div cg-busy="[dossiers]">

This worked fine in angular-busy 4.1.0, but not anymore in 4.1.1 (then it causes the error "cgBusy expects a promise (or something that has a .promise or .$promise ") But when I change the HTML to this: <div cg-busy="[dossiers.$promise]">

Then the busy-indicator works again in version 4.1.1 and Angular 1.2.26

Sorry I didn't provide a Plunkr, but I'm afraid I don't have the time for it at the moment. I hope I gave you enough information.

henriquecholo commented 9 years ago

I have the same issue of stephanie-dm..... i'm using Angular 1.3.1 and and Angular-busy 4.1.1

Just one thing, to make it work i just used Angular 1.2.26 and Angular-busy 4.1.0... Changed on bower worked for now, but I'm still waiting for a fix.

mckinleymedia commented 9 years ago

I had the same issue. I solved it with a simple ng-init: <div cg-busy="{promise:promise,message:message,templateUrl:'a-busy.html'}" ng-init="promise = $promise">

mckinleymedia commented 9 years ago

Update - when I do a subsequent full refresh of the page, the ng-init method fails. It worked for many conditions. To solve it, I had to hack the angular-busy.js "addPromiseLikeThing" function as follows: var addPromiseLikeThing = function(promise){ var then = tracker.getThen(promise);

        if (!then) {
            // throw new Error('cgBusy expects a promise (or something that has a .promise or .$promise');
        }
        if (then) {
                if (tracker.promises.indexOf(promise) !== -1){
                    return;
                }
                tracker.promises.push(promise);
                then(function(){
                    promise.$cgBusyFulfilled = true;
                    if (tracker.promises.indexOf(promise) === -1) {
                        return;
                    }
                    tracker.promises.splice(tracker.promises.indexOf(promise),1);
                },function(){
                    promise.$cgBusyFulfilled = true;
                    if (tracker.promises.indexOf(promise) === -1) {
                        return;
                    }
                    tracker.promises.splice(tracker.promises.indexOf(promise),1);
                });
        }
    };

Removed the error and encased the promise-processor in an if statement.

stephanie-dm commented 9 years ago

I have upgraded to 4.1.3 and I can't reproduce this issue anymore. The following code works again if "dossiers" is the result of a resource-call that returns an array: <div cg-busy="[dossiers]">