注释指令
我对角度比较陌生，所以我所问的也许真的很简单。我想加载一个Facebook评论框，我的想法是用一个角度指令来完成这个任务。
这是我的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上没有评论框。
没有人知道这个问题的原因吗？
回答 3
Stack Overflow用户
发布于 2014-04-03 09:50:47
我不知道如何在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>Stack Overflow用户
发布于 2014-04-19 18:37:32
我也有同样的问题。从您的版本开始：
- 我用一个解析替换了指令的模板属性，保留了原始代码，但是调用了重新计算。
- 我用document.location替换了有效的href (包含初始的角{ url }绑定)，因为在重新应用角之后，没有为我替换url
对我有效的结果是：
Index.html
这里加载了Facebook。此外，控制器和指令脚本也被加载。
<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上(默认为camel大小写)，C表示fb是它应用到的元素的类。元素是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;
}
}
]); 对我来说已经足够好了，我希望它也能帮助其他人。您的第一次尝试可能是使用角钢。
Stack Overflow用户
发布于 2017-02-16 22:44:46
我认为你有问题是因为评论中的大写C
您的代码：
<facebook-Comments href="{{track.share_url}}"></facebook-Comments>应该是：
<facebook-comments href="{{track.share_url}}"></facebook-comments>https://stackoverflow.com/questions/22757807
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号