Question

我搜索了很多，但没有找到我的问题的答案。

我是angularJs的新手，所以请以简单的方式解释......

我正在使用一个库进行社交媒体登录...一切正常......但我想从变量中的指令访问和存储返回的数据，并且还希望相应地在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的新手。感谢

Answer 1

将范围：{}更改为范围：false 这是指令定义中作用域的默认值。在这种情况下，该指令与其父控制器具有相同的范围。现在在控制器范围中创建一个userDetails对象，该对象将在FB登录后初始化。

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。

访问和显示指令返回的数据

1 个答案: