Search code examples
javascriptjqueryangularjsbuttondisabled-input

ng-disabled on buttons, but it doesn't refresh when I change value


I have the following buttons:

    <button id="facebook" type="button" ng-disabled="signing" ng-click="fblogin()">FACEBOOK</button>
    <button id="google" type="button" ng-disabled="signing" ng-click="googleLogin()">GOOGLE</button>

For example, when I press the Google button it does this:

$scope.googleLogin = function() {
    $scope.signing = true;
    document.getElementById('googleAuth').click();
};

My gapi doing this:

  gapi.load('auth2', function(){
                      // Retrieve the singleton for the GoogleAuth library and set up the client.
                      auth2 = gapi.auth2.init({
                        client_id: 'MY ID',
                        cookiepolicy: 'single_host_origin',
                        scope: 'email',
                        // Request scopes in addition to 'profile' and 'email'
                        //scope: 'additional_scope'
                      });
                      attachSignin(document.getElementById('googleAuth'));
                    });

And the button becomes disabled, which is great, because I change $scope.signing to TRUE.

BUT when I come back I do this: $scope.signing = false; and nothing changes, the button remains disabled. Why doesn't it enable itself, when I change signing to false, do I need to let the html know somehow to refresh the status of the buttons?


Solution

  • Thanks to Surajck, I made it work, setting it inside a $apply, just like this:

    $scope.$apply(function () {
            $scope.signing = false;
        });