Question

我的html看起来像

 <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>

js是

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;
              }
             });
        }

我的服务被编码为始终返回false。我希望这能刷新ui并隐藏按钮。它没有工作thoguh

Answer 1

使用$ appy服务通过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; })

              }
             });
        }

Answer 2

你有两个问题。

第一个问题是this回调中的gapi不再引用控制器，因此您可能希望保留对控制器的引用。

第二个问题是这个gapi调用是异步的，而不是Angular api的一部分，所以Angular在下一个摘要周期之前不会知道在其回调中所做的任何更改。为了强制使用摘要周期，可以使用$scope.$apply。

以下是两个修复程序的解决方案：

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;
      });

    }
  });
}

请注意，如果您接受ES6语法，则可以使用箭头函数继续引用原始this：

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;
      });

    }
  });
}

angularjs变量在ui上没有刷新

2 个答案: