我的状态(angularJS)从另一个页面更改回登录页面后，Google登录按钮不起作用

Question

有人可以帮助我解决谷歌按钮登录问题（我使用 gapi）吗？我在刷新登录页面时使用加载回调。它被定义并且一切正常。但是登录后，我使用 stateProvider 切换到另一个页面，但问题是当我使用 $state.go（'login'） 返回登录时。如果我单击谷歌登录按钮，它将无法工作

Answer 1

angular.module("app").controller('LoginCtrl',function($state,$scope,googleService) {
   
  
    window.loadGapi = function() {
        
        gapi.load('auth2', function() {
            
            auth2 = gapi.auth2.init({
               client_id: googleService.googleSSOClientId,
               fetch_basic_profile: true,
               scope: 'profile' 
            });
            
            var ele = document.getElementById('customBtn');
            var clickAttached = false;
            
            if (!clickAttached) {
                 auth2.attachClickHandler(ele,{},function(googleUser) {
                 onSignIn(googleUser);
              },function(error) {
                 console.log(error);
              });
              clickAttached = true;
            }
           
            
        });
    };
    
    function onSignIn(googleUser) {
        
        
        var profile = googleUser.getBasicProfile();
        var response = googleUser.getAuthResponse();
        
        document.getElementById('name').innerText = "Signed in: " +
        profile.getName();
        
        // notify angular update, enable two-way binding.
        $scope.$apply(function() {
            $scope.isSignIn = true;
        });
        
        // do further authentication with backend server
        
        
        $state.go('googleSignUp', { email: profile.getEmail(), name: profile.getName(), id_token: response.id_token });
        
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut();
        
    
    }
    
    console.log($scope);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!--Login-->
	<div ng-if="!isMobilePhone">
		<button class="g-sign-in-button" id="g-button" >
			<span>SIGN IN WITH GOOGLE</span>
			<i class="g-icon"></i>
		</button>
		<div class="login-or">
			<hr class="or-line or-line-left"/>&nbsp&nbspor&nbsp&nbsp<hr class="or-line or-line-right"/>
		</div>
		<form name="formData.loginForm" novalidate
              ui-enter="login(user)">
			<p>
				<!--Name-->
				<input type="text"
					   name="username"
					   placeholder="name"
					   ng-model="user.name"
					   autocapitalize="off"
                       ui-required
					   ui-auto-focus />
			</p>
			<p>
				<!--Password-->
				<input type="password"
					   name="password"
					   placeholder="password"
					   ng-model="user.password"
					   ui-required/>
			</p>
			<!--Remember Me-->
			<p id="rememberme">
				REMEMBER ME
				<input type="checkbox"
					   ng-model="rememberme.value" />
			</p>
		
		</form>
		
		<!--Login Button-->
		<p>
			<button ng-click="login(user)"
					class="purple-button"
					ng-class="{ disabled: formData.loginForm.$invalid }"
					id="log-in-button">
				<span>Log in</span>
				<i class="right-arrow-icon"></i>
			</button>
		</p>
		<!--Register Button-->
		<p>
			<button ng-click="register()"
					class="blue-button"
					id="register-button">
				<span>Start New Account</span>
				<i class="plus-icon"></i>
			</button>
		</p>
		
 <!-- loadGAPI:onload callback-->
		<script src="https://apis.google.com/js/platform.js?onload=loadGAPI" defer async></script>
      
      
      
      
      
      
      
 <!-- below is another html page, register, and now I want to
 cancel, so the state turns back to login, wich is the above html-->
      
<form name="formData.registerStudentForm">
	
	<input type="text"
		   name="firstName"
		   ng-model="formData.student.firstName"
		   placeholder="first"
		   required 	/>
	<input type="text"
		   name="lastName"
		   ng-model="formData.student.lastName"
		   placeholder="last"
		   required/>
		   
	<input type="text"
		   name="username"
		   ng-model="formData.student.username"
		   placeholder="username"
		   required/>
		   
	<input type="text"
		   name="invitationCode"
		   ng-model="formData.student.invitationCode"
		   placeholder="invitation code"
		   required/>
	
    
	<button ng-click="registerStudent(formData.student)"
			class="purple-button"
			ng-class="{ disabled: formData.registerStudentForm.$invalid }">
		<span>Register</span>
		<i class="right-arrow-icon"></i>
	</button>
	<div class="cancel-button">
		<a ui-sref="login()">Cancel</a>
	</div>
</form>