Question

我能够按下按钮。唯一的是我无法让他们与AngluarJS合作。这就是：当我点击链接进入我的facebook按钮所在的页面时，他们不会第一次显示。它们仅在我每次单击顶部的刷新按钮时显示。如何使其工作，以便在我单击指向页面的链接时始终显示它们？我的facebook div内容代码在third.html下，我在应用程序网站上标记为FB Test。我的facebook脚本代码在我的index.html页面上，这也是我设置我的角度来链接和标记每个页面的地方。另外，请使用本地主机测试应用程序网站。这是我的代码： index.html有......

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="css/master.css">

    <script src= "js/angular.min.js"></script>
    <script src= "js/angular-route.min.js"></script>
    <script src= "js/jquery-2.1.3.js"></script>

    <script type="text/javascript" src="js/app.js"></script>

    <link href="js/angular.min.js.map"></link>
    <link href="js/angular-route.min.js.map"></link>



    <script>

        var pattern = /http:.+?(?=.jpg)(....)/;
        var pieces = [];
        var data = $.ajax({
          dataType: "json",
          url: "js/data.json",
          success: function(){
            $.each(data.responseJSON,function(){

                //todo: add a placeholder image if there wasnt a url

                if(this.piece_image != ""){
                    this.image_URL = /http:.+?(?=.jpg)(....)/.exec(this.piece_image)[0];
                }
                pieces.push(this);
            })
            data.destroy;
          }
        });
    </script>
    <link rel="stylesheet" href="css/bootstrap.min.css">




    <!--style effects comment box position-->
    <style>
      .fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {
        width: 100% !important;
      }
      .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {
        width: 100% !important;
      }

    </style>



</head>

<body ng-app="app" style="padding-top:20px;">




<div id="fb-root"></div> 
  <script>
      window.fbAsyncInit = function() {

        FB.init({
          //*This is where our app id must go
          //Note to myself:
            //the following number was created from my test app called "Davidow Project test" which is currently not live
            //login to facebook, go to https://developers.facebook.com/apps/ to see test app
          appId      : '435225213325487',       
          channelUrl :  '//localhost:8080/#/second',
          status     : true,        
          xfbml      : true,
          version    : 'v2.1'
        });
      };
      </script>

      <script>

      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }

        js = d.createElement(s);
        js.id = id;

        js.src = "//connect.facebook.net/en_US/sdk.js";

        fjs.parentNode.insertBefore(js, fjs);
      }

      (document, 'script', 'facebook-jssdk'));
    </script>






    <div class="container">
        <a href="#/">Home</a> |
        <a href="#/explore">Explore</a> |
        <a href="#/gallery">Gallery</a> |
        <a href="#/map">Map</a> |
        <a href="#/tileView">Tile View</a> |
        <a href="#/fbtest">FB Test</a>

        <div ng-view></div>

    <!--TWITTER-->
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    </div>
</body>
</html>

**third.html has...**

<!--FACEBOOK CONTENT--> 

  <!--*must replace data-href with url of app site-->

  <!--like button and share buttons-->
  <div class="fb-like" data-href="http://www.example.com/"  data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

  <!--comment section-->
    <!--added in a data-width number to resize comment box-->
  <div class="fb-comments" data-href="http://www.example.com/"  data-numposts="3" data-width="350px;" data-colorscheme="light" 
  data-layout="standard"></div>


  <!--TWITTER-->
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

  <a href="http://twitter.com/share?count=vertical&amp;via=UTDDavidow" class="twitter-share-button">Tweet</a>

**app.js has...**
var app = angular.module("app", ['ngRoute']);

app.config(function($routeProvider){

    $routeProvider

    .when('/', {

        templateUrl: './views/main.html',
        controller: 'mainController'

    })

    .when('/explore', {

        templateUrl: './views/explore.html',
        controller: 'mainController'

    })

    .when('/gallery', {

        templateUrl: './views/gallery.html',
        controller: 'gallery'

    })


    .when('/map', {

        templateUrl: './views/map.html',
        controller: 'mainController'

    })

    .when('/tileView', {

        templateUrl: './views/tileView.html',
        controller: 'tileView'

    })

    .when('/fbtest', {

        templateUrl: './views/third.html',
        controller: 'mainController'

    })

});

app.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log){


}]);


app.controller('gallery', ['$scope', '$location', '$log', function($scope, $location, $log){


    $scope.pieces = pieces;


}]);

app.controller('tileView', ['$scope', '$location', '$log', function($scope, $location, $log){

    window.scope = $scope;

    $scope.pieces = pieces;

    $scope.url = [];
    for(var i = 0; i < pieces.length; i++){
        $scope.url.push(pieces[i].image_URL);
    }


}]);

Answer 1

您正在异步加载社交插件，因此在加载后需要使用FB.XFMBL.parse：

FB.XFBML.parse();

来源：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse

第一次加载页面时，AngularJS Facebook按钮不会显示

1 个答案: