angularjs variable on ui not refreshing

Question

my html looks as

 <div class="row" align="center" ng-if="searchCtrl.valid">
    <div class="col-lg-12"><button type="button" class="btn btn-default">Authorize to Instagram</button><br/></div>
   </div>

the js is

app.controller('AdminController', ['$scope', function($scope){
        this.valid = true;

        //see if ig login exists once login is performed using google
        gapi.client.instagramApi.validateIgLogin().execute(function(resp) {
             if(resp && resp.hasOwnProperty('error')) {
                 // error
                 alert(resp.error.message);
              }else{
                  //successful response
                  console.log(resp);
                  this.valid = resp.valid;
              }
             });
        }

my service is coded to return false always. and i am expecting this to refresh ui and hide the button. its not working thoguh

I'm not seeing any $scope update/assignments in your example — Kiee
– Kiee, Commented May 5, 2016 at 9:33
$scope.$apply(); ? after last stmt in resp ? i added that but no luck — Vik
– Vik, Commented May 5, 2016 at 9:37
be careful using this inside callback functions. You can never be sure that it's going to be what you expect. Why not move this.valid to $scope.valid. You'll probably have to update your binding to ng-if="valid" as well. — phuzi
– phuzi, Commented May 5, 2016 at 9:50

floribon · Accepted Answer · 2016-05-05 10:35:09Z

You're having two problems.

This first one is that this in your gapi callback doesn't refers to the controller anymore, so you may want to keep a reference to your controller.

The second one is that this gapi call is asynchronous and not part of the Angular api, so Angular will not be aware of any change that is made within its callback until the next digest cycle. In order to force a digest cycle, so can use $scope.$apply.

Here is a solution with both fixes:

app.controller('AdminController', ['$scope', function($scope) {
  var thisController = this;

  this.valid = true;

  //see if ig login exists once login is performed using google
  gapi.client.instagramApi.validateIgLogin().execute(function(resp) {
    if(resp && resp.hasOwnProperty('error')) {
      // error
      alert(resp.error.message);
    } else {
      //successful response
      console.log(resp);
      $scope.$apply(function() {
        thisController.valid = resp.valid;
      });

    }
  });
}

Note that if you accept ES6 syntax, you can keep reference to the original this by using arrow functions:

app.controller('AdminController', ['$scope', function($scope) {
  this.valid = true;

  //see if ig login exists once login is performed using google
  gapi.client.instagramApi.validateIgLogin().execute((resp) => {
    if(resp && resp.hasOwnProperty('error')) {
      // error
      alert(resp.error.message);
    } else {
      //successful response
      console.log(resp);
      $scope.$apply(() => {
        this.valid = resp.valid;
      });

    }
  });
}

Chathura Hettiarachchi · Accepted Answer · 2016-05-05 10:55:11Z

1

use the $appy service to bind data through the instergram

app.controller('AdminController', ['$scope', function($scope){
        this.valid = true;

        //see if ig login exists once login is performed using google
        gapi.client.instagramApi.validateIgLogin().execute(function(resp) {
             if(resp && resp.hasOwnProperty('error')) {
                 // error
                 alert(resp.error.message);
              }else{
                  //successful response
                  console.log(resp);
                 $scope.$apply(function(){ this.valid = resp.valid; })

              }
             });
        }

edited May 5, 2016 at 10:55

answered May 5, 2016 at 9:39

Chathura Hettiarachchi

1317 bronze badges

2 Comments

Vik Over a year ago

care to explain why ?

Chathura Hettiarachchi Over a year ago

because, If you use external API (jQuery, pure javacript ..etc) whatever. it's not the angular component. Angular framework is different. if you bind data to angular object from non angular object you have to inform that to angular. $apply , $digest are the methods provide by the angular to do that... otherwise angular not recognize changes

Collectives™ on Stack Overflow

angularjs variable on ui not refreshing

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related