Question

我对Angular比较新，所以也许我的问题很简单。我想加载一个Facebook评论框，我的想法是用Angular指令做到这一点。

这是我的HTML代码：

<div class="comments">
<div id="fb-root"></div>
<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/nl_NL/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<facebook-Comments href="{{track.share_url}}"></facebook-Comments>    
</div>

这是我的指示：

angular.module( "CommentsDirectiveModule", [] )
.directive("facebookComments", function () {
  return {
      restrict: "E",
      scope: {
          code: "@href",
      },
      replace: true,
      template: '<fb:comments href="{{ur}}" width="300" numposts="5" colorscheme="light"></fb:comments>',
      link: function(scope) {
        scope.$watch("code", function (newVal) {
          if (newVal) {
            scope.url = $sce.trustAsResourceUrl(newVal);
          }
        });
      }
  };
} );

将{{track.share_url}}传递给指令并返回到html。但问题是没有Facebook评论框。

有没有人没有这个问题的原因？

Answer 1

我遇到了同样的问题。从您的版本开始：

我用解析替换了指令的template属性，保留了原始代码但是调用了重新评估
我用document.location替换了有效的href（包含你的初始角度{{url}}绑定），因为在重新应用angular之后没有为我替换url

对我有用的结果：

<强>的index.html

此处加载了Facebook SDK。还加载了控制器和指令脚本。

<html class="" lang="en" id="ng-app" ng-app="myApp">
<head>
    <base href="/">
    <meta property="fb:admins" content="{6389564545}"/>
    <meta property="fb:app_id" content="{643503385720234}"/>
</head>
<body> 
    <div id="fb-root"></div>
    <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/nl_NL/all.js#xfbml=1&appId=643503385720456";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

    <section class="section content">
       <div ng-view></div>
    </section> 

    <script src="/scripts/angular.min.js"></script>
    <script src="/scripts/angular-route.min.js"></script> 
    <script src="/angular/app.js"></script>
    <script src="/angular/controllers.js"></script>
    <script src="/angular/directives.js"></script>      

</body>
 </html>

<强> app.js

这会加载控制器和指令，这里没什么特别的，仅供参考。

angular.module('myApp', [
   'ngRoute',
   'myApp.controllers',
   'myApp.directives'
]) 
.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) { 
  $routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'HomeController'});
  $routeProvider.when('/myEntity/:id', {templateUrl: 'partials/myEntity.html', controller: 'MyEntityController'});  
  $routeProvider.when('/contact', {templateUrl: 'partials/contact.html', controller: 'ContactController'});  
  $routeProvider.otherwise({redirectTo: '/home'});
  $locationProvider.html5Mode(true); 
}]);

directives.js中的魔力

该指令绑定fb-comments（camel case是默认值），C表示fb-comments是它应用的元素的类。元素[0]是div，数据集是html5数据属性的集合，href是data-href属性。我将它设置为当前document.location.href（纯JavaScript）。然后使用FB.XFBML（在index.html中加载）再次解析该元素。每次更改DOM并涉及此元素时，该指令都会启动并重新应用Facebook注释代码，从而生成注释框。

angular.module('myApp.directives', [])
.directive('fbComments', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attributes) { 
            element[0].dataset.href = document.location.href;
            return typeof FB !== "undefined" && FB !== null ? FB.XFBML.parse(element.parent()[0]) : void 0;
        }
    };
});

部分视图中的一行myEntity.html

指令使用的元素。这个getLocation引用了控制器中的myEntityController。

<div class="fb-comments" data-href="{{getLocation()}}" data-numposts="10" data-colorscheme="light" data-width="580" id="commentbox"></div>

<强> controllers.js

在范围内有getLocation方法，此处没有其他内容。

angular.module('myApp.controllers', [])
  .controller('MyEntityController', ['$scope', '$routeParams', '$location',
function($scope, $routeParams, $location) {  

     $scope.id = $routeParams.id;   

     $scope.getLocation = function(){
      return document.location.href; 
 }       

}        
  ]);

对我来说足够好，我希望它也会帮助其他人。您的第一次尝试可能应该使用angular-easyfb

Answer 2

我不知道如何在angularJS中为我的指令编写一个工作解析函数，但这个脚本为我做了诀窍：

https://github.com/pc035860/angular-easyfb

我按照说明使用了这个例子：http://plnkr.co/edit/gFM1LV?p=preview 并将此行添加到我的HTML中：

<div class="fb-comments" data-href="{{track.share_url}}" data-width="300px" data-numposts="5" data-colorscheme="light"></div>

Answer 3

我认为你因为评论中的大写 C 而遇到问题

您的代码：

<facebook-Comments href="{{track.share_url}}"></facebook-Comments>

应该是：

<facebook-comments href="{{track.share_url}}"></facebook-comments>

Angular facebook-comments指令

3 个答案: