2014-06-23 146 views
0

我是新角度和嘗試設置登錄系統。當點擊按鈕時,我有一些「按鈕」設置將用戶重定向到Oauth提示給用戶facebook/google賬戶。我的問題是登錄用戶的功能正在頁面日誌中立即執行,而不是單擊按鈕時執行。ng-click功能立即執行功能,無需點擊

我很肯定,根源在於JS對象的工作方式,但我仍然在學習angularjs,這有點令人困惑。

我認爲將函數放在$ scope中會立即執行它們,但我不知道我還能如何將它們暴露給ng-click。

有人可以幫我弄清楚如何讓按鈕按預期工作嗎?

模板:

<ion-view title="Account"> 
    <ion-nav-buttons side="right"> 
     <button menu-toggle="right" class="button button-icon icon ion-navicon"></button> 
    </ion-nav-buttons> 
    <ion-content class="has-header padding"> 

     <h1 ng-click="google_login()">Log in with Google</h1> 
     <h1 ng-click="fb_login()">Log in with Facebook</h1> 
     <h1 ng-click="dev_login()">Dev login</h1> 
     <div id="logs"></div> 
     <form class="list"> 
      <label class="item item-input"> 
       <input type="text" placeholder="Username" ng-model="user.username" required> 
      </label> 
      <label class="item item-input"> 
       <input type="password" placeholder="Password" ng-model="user.password" required> 
      </label> 
      <div class="padding"> 
       <button class="button button-block button-stable" ng-click="email_authenticate()">Login</button> 
      </div> 
     </form> 
    </ion-content> 
</ion-view> 

控制器:

.controller('AccountCtrl', function($scope, $state, Authentication) { 
    $scope.dev_login = Authentication.dev_authenticate(); //executes immediately 
    $scope.fb_login = Authentication.fb_authenticate(); //executes immediately 
    $scope.google_login = Authentication.google_authenticate(); //executes immediately 
    $scope.email_login = Authentication.email_authenticate(); //executes immediately 
    $scope.logout = Authentication.logout(); 
}); 

這些在services.js定義:

.factory('Authentication', function ($http) { 
    return { 
     authenticate: function() { 
      return $http({ 
       url: 'https://api.squawkfinace.com/authenticate', 
       method: 'post'//, 
       //data: {facebook_authtoken: key} 
      }); 
     }, 
     fb_authenticate: function() { 
      return $.oauth2({ 
       //Oauth details 
      }, function (token, response) { 
       localStorage.setItem("LoggedInAccount", JSON.stringify({'platform': 'facebook', 'token': token})); 
       console.log(token); 
       $state.transitionTo("app.notifications"); 
      }, function (error, response) { 
       // do something with error object 
      }); 
     }, 
     google_authenticate: function() { 
      return $.oauth2({ 
       //oauth details 
      }, function (token, response) { 
       localStorage.setItem("Account", JSON.stringify({'platform': 'google', 'key': token})); 

      }, function (error, response) { 
       // do something with error object 
       $("#logs").append("<p class='error'><b>error: </b>" + JSON.stringify(error) + "</p>"); 
       $("#logs").append("<p class='error'><b>response: </b>" + JSON.stringify(response) + "</p>"); 
      }); 
     }, 
     dev_authenticate: function() { 
      return null; 
     }, 
     email_authenticate: function() { 
      return null; 
     }, 
     logout: function() { 
      localStorage.removeItem("Account"); 
      return null; 
     } 
    } 
}); 

回答

2

這是因爲你在實際執行的功能

$scope.dev_login = Authentication.dev_authenticate(); 

應該

$scope.dev_login = Authentication.dev_authenticate; 

第一個方案執行的功能和結果$範圍分配。您想要將引用分配給該函數。