angularjs – Angular facebook-comments指令
发布时间：2020-12-17 17:05:48 所属栏目：安全 来源：网络整理
导读：我对Angular比较新,所以也许我问的很简单. 我想加载一个Facebook评论框,我的想法是用Angular指令做到这一点. 这是我的HTML代码： div class="comments"div id="fb-root"/divscript(function(d,s,id) { var js,fjs = d.getElementsByTagName(s)[0]; if (d.get
|
我对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评论框. 有没有人没有这个问题的原因？ 解决方法
我有同样的问题.从您的版本开始：
>我用解析替换了指令的template属性,保留原始代码但调用重新评估 结果对我有用： 的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,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,'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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |