带有angularjs和facebook分享按钮的单页面应用程序

我按照这篇文章在我的应用程序中部署facebook share botton http://www.hyperarts.com/blog/tutorial-how-to-add-facebook-share-button-to-your-web-site-pages/

第一个问题是我无法通过post.id,post.captionFacebook的脚本.

第二个是Facebook墙上每个帖子的链接link: ' link to every {{post.id}}'.如果人们点击他们墙上共享的链接,它应该jum(自动滚动)到我的网站上的特定帖子,这是单页所以所有帖子都有相同的链接

非常感谢!

这是我的Angularjs控制器:

function MyController($scope) {
            $scope.posts = [{"title": "AAtitle",
                            "content":"AAcontent",
                            "caption":"AAcaption",
                            "id":"adfddsf"dfsdfdsds
                           },
                           {"title": "BBtitle",
                            "content":"BBcontent",
                            "caption":"BBcaption",
                            "id":"dfgfddrggdgdgdgfd"
                           },
                            {"title": "CCtitle",
                            "content":"CCcontent",
                            "caption":"CCcaption",
                            "id":"dhgfetyhnncvcbcqqq"
                           }
                          ]
        }

这是facebook SDK:

window.fbAsyncInit = function() {
FB.init({appId: 'MY APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());

这是我的HTML

  

    

           
 {{post.title}} 
           
 {{post.content}} 
           
 
                
share 
        

    
  

Chickenrice.. 34

我想你可以在"Angular方式"中注册分享按钮点击事件处理程序.将逻辑移动到控制器并使用ng-click指令触发共享操作.

我的实施

HTML

  

  
  

    

        
{{post.title}}
        
{{post.content}}
        SHARE
    
  

调节器

angular.module("myApp",[])
.controller("fbCtrl",function($scope){
  $scope.posts = [{id:1,title:"title1",content:"content1",caption:"caption1"},{id:2,title:"title2",content:"content2",caption:"caption2"}];
  $scope.share = function(post){
    FB.ui(
    {
        method: 'feed',
        name: 'This is the content of the "name" field.',
        link: 'http://www.hyperarts.com/external-xfbml/'+post.id,
        picture: 'http://www.hyperarts.com/external-xfbml/share-image.gif',
        caption: post.caption,
        description: 'This is the content of the "description" field, below the caption.',
        message: ''
    });
  }
});

截图

如果此功能适用于多个部分,您可以为FACEBOOK共享创建服务.

希望这是有帮助的.