ReferenceError：新しいLoginControllerでfbloginが定義されていません - 角度

Question

私はFacebook経由で簡単なログインを追加しようとしていますが、何か問題があります。

.jsファイル：

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('LoginController', LoginController); 

    LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService']; 
    function LoginController($location, AuthenticationService, FlashService) { 
     var vm = this; 

     vm.login = login; 
     vm.fblogin = fblogin; 
     (function initController() { 
      // reset login status 
      AuthenticationService.ClearCredentials(); 
     })(); 
     fblogin = function(){ 
      FB.login(function(response) { 
       if (response.authResponse) { 
       console.log('Welcome! Fetching your information.... '); 
       FB.api('/me', function(response) { 
       console.log('Good to see you, ' + response.name + '.'); 
       }); 
       } else { 
       console.log('User cancelled login or did not fully authorize.'); 
       } 
      }); 
     } 
     function login() { 
      vm.dataLoading = true; 
      AuthenticationService.Login(vm.username, vm.password, function (response) { 
       if (response.success) { 
        AuthenticationService.SetCredentials(vm.username, vm.password); 
        $location.path('/'); 
       } else { 
        FlashService.Error(response.message); 
        vm.dataLoading = false; 
       } 
      }); 
     }; 

    } 

})(); 

そして.htmlを：

<div class="col-md-6 col-md-offset-3"> 
    <h2>Login</h2> 
    <form name="form" ng-submit="vm.login()" role="form"> 
     <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }"> 
      <label for="username">Username</label> 
      <input type="text" name="username" id="username" class="form-control" ng-model="vm.username"/> 
      <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }"> 
      <label for="password">Password</label> 
      <input type="password" name="password" id="password" class="form-control" ng-model="vm.password" /> 
      <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span> 
     </div> 
     <button ng-click="vm.fblogin()">Facebook Login</button> 
     <div class="form-actions"> 
      <button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button> 
      <img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> 
      <a href="#/register" class="btn btn-link">Register</a> 
     </div> 

    </form> 
</div> 

本当にHTMLには問題部分だけはこの1つである：

<button ng-click="vm.fblogin()">Facebook Login</button> 

そしてI」このエラーが発生しました： ReferenceError：fbloginが定義されていません at new LoginContローラー

Answer 1

正しいAPP IDとリダイレクトURLがアプリ設定で設定されていることを確認してください。

.config([ 
    'FacebookProvider', 
    function(FacebookProvider) { 
    var myAppId = '1367223633302978';  
    FacebookProvider.init(myAppId);  
    } 
    ]) 

DEMO