Angular facebook-comments指令

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>