2016-01-03 1 views
0

Je sais que cela a été demandé plusieurs fois, mais j'ai vérifié plusieurs autres questions et réponses et je ne suis toujours pas près de résoudre mon problème.Impossible d'accéder à la variable globale dans un autre fichier

index.html:

<!doctype html> 
<html lang="en" ng-app="GitUserSearch"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Github user search</title> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="bootstrap_css_overrides/bootstrap_overrides.css"> 
    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="js/secrets.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/gitUserSearchController.js"></script> 
    </head> 

    <body ng-controller="GitUserSearchController as searchCtrl"> 
    <div class="container"> 
     <br> 
     <form class="form-horizontal"> 
     <input type="text" ng-model="searchCtrl.searchTerm" ng-change="searchCtrl.doSearch()" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"> 
     <button class="btn btn-primary" ng-click="searchCtrl.doSearch()">Search</button> 
     </form> 
     <br> 
     <ul class="list-group"> 
     <li ng-repeat="user in searchCtrl.searchResult.items"> 
      <img ng-src="{{user.avatar_url}}&s=50"> 
      <a ng-href="{{user.html_url}}">{{user.login}}</a> 
     </li> 
     </ul> 
    </div> 
    </body> 
</html> 

js/secrets.js:

githubToken = "longGithubTokenThatICannotShareHerePublicly"; 

secrets.js est en .gitignore.

js/gitUserSearchController.js:

githubUserSearch.controller('GitUserSearchController', ['$resource', function($resource) { 
    var self = this; 

    var searchResource = $resource('https://api.github.com/search/users/'); 
    var githubToken = githubToken; 

    self.doSearch = function() { 
    self.searchResult = searchResource.get(
     { q: self.searchTerm, access_token: githubToken } 
    ); 
    }; 
}]); 

Quand je lance l'application que je peux voir, en utilisant les outils de navigateur d'inspection, que la demande HTTP faits sans la chaîne githubToken.

Lorsque je code en dur la chaîne githubToken dans gitUserSearchController, au lieu d'essayer de l'utiliser en utilisant la variable globale supposée githubToken, la requête http est parfaitement faite avec le jeton GitHub présent, comme il se doit.

Il semble donc y avoir un problème avec la configuration des fichiers et la manière dont les variables sont déclarées et consultées.

Repo here.

Répondre

5

Lorsque vous faites ceci:

var githubToken = githubToken; 

vous définissez une nouvelle variable locale qui « cache » global du même nom. Pour tout nom de symbole donné, la portée locale est recherchée avant la recherche de l'étendue globale, de sorte qu'une variable locale portant le même nom qu'un global "masque" le global.

De plus, en raison de « levage » de toutes var définitions en Javascript en haut de la portée de la fonction dans laquelle ils sont déclarés, votre ligne de code ci-dessus est en fait traité comme celui-ci:

var githubToken; 
githubToken = githubToken; 

Ainsi, vous pouvez voir plus loin pourquoi il ne fait pas ce que vous voulez qu'il fasse. Changez le nom de la variable locale pour qu'elle soit différente ou ne définissez même pas une nouvelle variable, utilisez simplement la variable globale car il n'y a aucune raison de l'attribuer à une variable locale.

+0

Merci! Je me suis rendu compte de cela moi-même en raison de «l'effet de canard en caoutchouc» après avoir posté, mais je ne savais pas exactement pourquoi et vous l'avez très bien expliqué afin d'encourager. – Andy