모바일 및 웹보기에서 google + signin 버튼을 렌더링하는 방법

Question

Google + 로그인으로 웹 사이트를 구축 중입니다. 사이트가 응답, 그래서 나는 다음과 같이 웹과 모바일에 대해 서로 다른 구글 + 버튼이 있습니다 : 모바일 뷰

로그인 절차 버튼 -> 웹보기에 숨겨진 웹 뷰 버튼 로그인의

<div id="mobile" class="container visible-xs hidden-sm hidden-md hidden-lg"> 
    <div class="row"> 
    <div class="col-xs-12 mobile-signup-form"> 
     <form class="form-signin"> 
     <h2 class="form-heading visible-xs hidden-lg hidden-sm hidden-md">Find great tour guides.</h2> 
     <input type="text" class="form-control" placeholder="Pick a Username" autofocus> 
     <input type="text" class="form-control" placeholder="Your email"> 
     <input type="password" class="form-control" placeholder="Create a Password"> 
     <button id="submit-btn" class="btn btn-lg btn-primary btn-block" type="submit">Sign up for Tourbly</button> 

     <div class="hr-with-words"> 
      <span class="smallor">or</span> 
     </div> 

     <div id="gSignInWrapper"> 
      <div id="customBtn_M" class="customGPlusSignIn"> 
      <span class="icon"></span> 
      <span class="buttonText">Google</span> 
      </div> 
     </div> 
     </form> 

    </div> 
    </div> 
</div> 

-> 숨겨진 모바일보기에

<div id="gSignInWrapper" ng-show="immediateFailed"> 
    <div id="customBtn" class="customGPlusSignIn"> 
    <span class="icon"></span> 
    <span class="buttonText">Sign up with Google</span> 
    </div> 
</div> 

나는 웹보기의 버튼을 렌더링하기 위해 다음 JS 코드를 사용

gapi.signin.render('customBtn', { 
     'callback': 's_up_c_bks_loc', 
     'clientid': '1066634592899.apps.googleusercontent.com', 
     'cookiepolicy': 'single_host_origin', 
     'requestvisibleactions': 'http://schemas.google.com/AddActivity', 
     'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email' 
    }); 

하나의 id 만 렌더링 함수에 전달할 수 있습니다. 올바른보기 (모바일 또는 웹)로 렌더링 된 오른쪽 버튼을 얻는 방법은 무엇입니까?

둘 다 렌더링하려했지만 마지막 것이 첫 번째를 오버라이드합니다.

저는 각도 j를 사용하고 있으므로이를 사용하는 모든 제안/해결책이 인정 될 것입니다. 감사합니다.

Answer 1

렌더링 기능을 두 번 이상 호출 할 수 있습니다. 가장 쉬운 방법입니다. 두 번째 매개 변수를 두 호출에 전달하는 var로 이동하거나 새로운 페이지 수준 구성을 활용할 수 있습니다. https://developers.google.com/+/web/signin/reference#page-config

이것은 즉시 모드 확인을 트리거하는 가장 쉬운 방법 일 수 있습니다. (사용자가 이전에 동의했는지 확인하고 콜백을 시작하십시오). 즉, 즉각적인 실패의 한 부분으로 그 시간에 렌더링 할 것을 선택할 수 있음을 의미합니다. 즉, 즉각적인 검사가 실패했을 경우에만 표시하는 ng-show에서 immediateFailed var에 대한 참조가 있음을 알 수 있습니다. 이미 일종의).

페이지 수준 설정을 사용하는 경우, 당신도 매개 변수를 전달할 필요가 없습니다 것입니다, 단지 전화 :

gapi.signin.render('customBtn'); 
gapi.signin.render('customBtn_M');