2017-03-29 6 views
0

私は多くを検索しましたが、私の問題の答えは見つけられませんでした。私はそう簡単に説明してくださいangularJsに新しいですアクセスと表示指示から返されたデータ

...

私はソーシャルメディアのログイン用のライブラリを使用しています...すべてが正常に動作している..しかし、私はアクセスし、返されたデータを保存したい

fromディレクティブを変数に追加し、それに応じてdiv内にそのデータを表示したい場合もあります。以下

ディレクティブのコードである:コンソールに

socialLogin.directive("fbLogin", function($rootScope, fbService, social, socialLoginService){ 
return { 
    restrict: 'A', 
    scope: {}, 
    replace: true, 
    link: function(scope, ele, attr){ 
     ele.on('click', function(){ 
      fbService.login().then(function(res){ 
       if(res.status == "connected"){ 
        fbService.getUserDetails().then(function(user){ 
         socialLoginService.setProvider("facebook"); 
         var userDetails = {name: user.name, email: user.email, uid: user.id, provider: "facebook", imageUrl: user.picture.data.url} 
         $rootScope.$broadcast('event:social-sign-in-success', userDetails); 
         console.log(userDetails); 
        }, function(err){ 
         console.log(err); 
        }) 
       } 
      }, function(err){ 
       console.log(err); 
      }); 
     }); 
    } 
} 

})

、にconsole.log(userDetails)がオブジェクトとして表示され、今私はそれに応じて、また、DIV内のオブジェクトのデータを表示します変数に応じてすべてのデータを変数に格納してデータベースに格納したいと考えています。

私は角度jsで新しいです。 ありがとう

答えて

0

範囲を変更:{}スコープ:false これは、ディレクティブ定義のスコープのデフォルト値です。この場合、ディレクティブは親コントローラと同じスコープを持ちます。 FBスコープのログイン後に初期化されるコントローラスコープ内にuserDetailsオブジェクトを作成します。

socialLogin.directive("fbLogin", function($rootScope, fbService, social, socialLoginService){ 
 
return { 
 
    restrict: 'A', 
 
    scope: false, 
 
    replace: true, 
 
    link: function(scope, ele, attr){ 
 
     ele.on('click', function(){ 
 
      fbService.login().then(function(res){ 
 
       if(res.status == "connected"){ 
 
        fbService.getUserDetails().then(function(user){ 
 
         socialLoginService.setProvider("facebook"); 
 
         scope.userDetails = {name: user.name, email: user.email, uid: user.id, provider: "facebook", imageUrl: user.picture.data.url} 
 
         $rootScope.$broadcast('event:social-sign-in-success', userDetails); 
 
         console.log(scope.userDetails); 
 
        }, function(err){ 
 
         console.log(err); 
 
        }) 
 
       } 
 
      }, function(err){ 
 
       console.log(err); 
 
      }); 
 
     }); 
 
    } 
 
}

今、あなたは$ scope.userDetailsを使用することができます。

+0

私は上記のコードを試した後、コントローラからデータにアクセスしましたが、コンソールでまだ定義されていません。 –

+0

scopeを作成してみてください:true、 scope:trueは、子ディレクティブが親スコープのデータを変更する目的で役立つ場合に便利です。 –

関連する問題