Question

我真的很困惑，因为我无法弄清楚为什么varialbe fccDisplayName是＆＃34;未定义＆＃34;。我创建了一个函数，进行了api调用，为fccDisplayName分配了一个线索;我得到了价值。但是当在Init函数中调用此函数时，我得到一个未定义的。

我想这与它的＆＃34;范围＆＃34;有关，但无法找到原因。在这里，我不使用$ scope，但＆＃34; Controller as＆＃34;。

您的帮助或任何提示都将受到高度赞赏

＆＃13;

(function(){
  
  var app = angular.module('twitch', []); 
  
  app.controller('twitchController', ['$http', function($http){
    
    var twitchApi = 'https://api.twitch.tv/kraken/';
    var fccUrl = 'users/freecodecamp';
    var fccDisplayName;
    
    var getFcc = function(){
      $http({
        method: 'GET',
        url: twitchApi+fccUrl
        }).then(function successCallback(response) {
              fccDisplayName = response.data.display_name;
              fccBio = response.data.bio; 

          }, function errorCallback(response) {
              console.log(response);
      });
    }
    
    var init = function(){
	  getFcc();
      console.log(fccDisplayName);
    }
    
    //We init the app
    init();
    
    
  }]);
  
})();

＆＃13;

<html>
  <head>
    <script src="https://code.angularjs.org/1.3.14/angular.min.js"></script>
    </head>
  <body ng-app="twitch">
    
<div ng-controller="twitchController as twitch"> 
      <div class="col-md-6 col-lg-6 item" id="freecodecamp">
          {{testAngular}}
          <h2>{{fccDisplayName}} Channel</h2>
      </div>
</div>    



</body>
</html>

＆＃13;

Answer 1

您正在尝试在异步服务请求完成之前使用fccDisplayName。您需要在请求的.then()分辨率内执行操作。

收到回复后，您需要将其绑定到this上下文，因为您使用的是controllerAs。

var vm = this;

var getFcc = function(){
    $http({
        method: 'GET',
        url: twitchApi+fccUrl
    }).then(function successCallback(response) {
        vm.fccDisplayName = response.data.display_name;
        fccBio = response.data.bio; 

        console.log(vm.fccDisplayName);
    }, function errorCallback(response) {
        console.log(response);
    });
}

var init = function(){
    getFcc();
}

更新您的html绑定以指向controllerAs变量。

<div ng-controller="twitchController as twitch"> 
      <div class="col-md-6 col-lg-6 item" id="freecodecamp">
          {{testAngular}}
          <h2>{{twitch.fccDisplayName}} Channel</h2>
      </div>
</div>

AngularJS中的Init函数调用另一个函数并返回undefined

1 个答案: