首页 / JAVASCRIPT / javascript-Facebook评论插件未显示在AngularJS中

javascript-Facebook评论插件未显示在AngularJS中

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-Facebook评论插件未显示在AngularJS中，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6094字，纯文字阅读大概需要9分钟。

内容图文

查看此帖子底部的更新

我正在尝试在ng-repeat中实现Facebook评论框,并且显示时出现问题.

在Chrome中,直到单击刷新按钮后它才显示,而在IE10中,我根本无法显示它.

我的(简体)索引页：

<!doctype html>
<html lang="en" data-ng-app="eatsleepcode">
    <head>
        <title data-ng-bind="pageTitle">&lt;eat-sleep-code /&gt;</title>
        <meta charset="utf-8" />
            <base href="/">
        <link rel="stylesheet" href="/style/jquery-ui.min.css" />
        <link rel="stylesheet" href="/style/bootstrap.min.css" />
        <link rel="stylesheet" href="/style/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="/style/en-us.css" />
    </head>
    <body>
        <div class="container-fluid">
            <div class="col-lg-8 page-content" id="content" data-ng-view>
            </div>
            <div class="col-lg-4 page-content">
                </div>
        </div>
        <footer id="footer">
            <div class="container-fluid">
            </div>
        </footer>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-resource.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-route.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-animate.min.js"></script>
        <script type="text/javascript" src="/scripts/xml2json.min.js" ></script>
        <script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
        <script type="text/javascript" src="/scripts/app.js"></script>
        <script type="text/javascript" src="/scripts/jquery.validate.min.js" defer="defer"></script>        
        <script type="text/javascript" src="/scripts/render.min.js" defer="defer"></script>     
        <script type="text/javascript" src="/scripts/repo.min.js" defer="defer"></script>
        <div id="fb-root"></div>
        <script type="text/javascript">
            (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#xfbml=1&appId=1442336282690482&version=v2.0";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        </script>
    </body>
</html>

我的观点：

<div class="blog-main">
    <article class="blog-post" data-ng-if="article.id == post || post===NULL" data-ng-repeat="article in data.blog.article | orderBy:'createdate':true | slice:currentPage*pageSize:currentPage+1*pageSize" itemscope itemtype="http://schema.org/BlogPosting">
        <h2 class="blog-post-title" itemprop="headline">
            <a href="http://eat-sleep-code.com/#!/blog/{{article.id}}" title="Permalink to {{article.title.__cdata}}" itemprop="url">{{article.title.__cdata}}</a>
        </h2>
        <span class="blog-post-meta">Posted on <time datetime="{{article.createdate | date:'yyyy-MM-dd'}}">{{article.createdate | date:'MMMM dd, yyyy h:mma'}}</time> by <span itemprop="author">{{article.author}}</span></span>
        <div class="blog-post-content-wrapper">
            <div class="blog-post-content" ng-bind-html="article.content.__cdata" itemprop="text">
                {{article.content.__cdata}}
            </div>
        </div>
        <div data-ng-if="article.id == post">
            <div class="fb-comments" data-href="http://eat-sleep-code.com/#!/blog/{{article.id}}" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
            <br />
            <a href="/#!" class="btn btn-default btn-sm blog-button-back"><span class="glyphicon glyphicon-chevron-left blog-button-back-icon"></span> Back</a>
        </div>  
    </article>

    <div data-ng-if="numberOfPages > 1">
        <button type="button" class="btn btn-default btn-sm blog-button-older" data-ng-disabled="currentPage == 0" data-ng-click="currentPage=currentPage-1"><span class="glyphicon glyphicon-chevron-left blog-button-older-icon"></span> Older Posts</button>
        <button type="button" class="btn btn-default btn-sm blog-button-newer" data-ng-disabled="currentPage >= numberOfPages - 1" data-ng-click="currentPage=currentPage+1">Newer Posts <span class="glyphicon glyphicon-chevron-right blog-button-newer-icon"></span></button>
    </div>
</div>

我发现了这个问题：Facebook comment plugin Angularjs,但我的似乎有所不同,因为当我查看当前元素时,我看到data-href正确填充：

<div class="fb-comments" data-href="http://eat-sleep-code.com/#!/blog/2" data-numposts="5" data-colorscheme="light" data-width="100%"></div>

更新：

我将视图中的行更新为：

<div class="fb-comments" dyn-fb-comment-box page-href="http://eat-sleep-code.com/#!/blog/{{article.id}}" data-numposts="5" data-colorscheme="light" data-width="100%"></div>

我添加了以下指令,现在显示注释框.但是,data-width属性现在被忽略.注释框以默认的550px宽度呈现.

app.directive('dynFbCommentBox', function () {
    function createHTML(href, numposts, colorscheme, width) {
        return '<div class="fb-comments" ' +
                       'data-href="' + href + '" ' +
                       'data-numposts="' + numposts + '" ' +
                       'data-colorsheme="' + colorscheme + '" ' +
                       'data-width="' + width + '">' +
               '</div>';
    }


    return {
        restrict: 'A',
        scope: {},
        link: function postLink(scope, elem, attrs) {
            attrs.$observe('pageHref', function (newValue) {
                var href        = newValue;
                var numposts    = attrs.numposts    || 5;
                var colorscheme = attrs.colorscheme || 'light';
                var width = attrs.width || '100%';
                elem.html(createHTML(href, numposts, colorscheme, width));
                FB.XFBML.parse(elem[0]);
            });
        }
    };
});

解决方法:

您将需要制定一个指令来监视data-href属性,该问题与(基本相同)问题(在https://stackoverflow.com/a/15285102/3715815中使用flash)以及在您使用Facebook链接指向自己的帖子中所建议的相同.原因仍然是相同的. angular需要花费一些时间来插值插值符号之间的值,因此facebook sdk只会在其中存在的数据上“触发”,由于它不是angular的内部循环的一部分,因此实际上将为http://eat-sleep-code.com/#!/blog/ {{article.id}}.

还有许多其他文章涉及加载图像的问题,因为浏览器将在遇到src属性时尝试使用src属性获取所有图像,并且还会在插入实际src值之前进行提示.因此,核心的角度小组制定了一些指令,例如ng-src来处理这种常见的用例,但是在这一点上,您必须按照链接所描述的内容进行操作.

内容总结

以上是互联网集市为您收集整理的javascript-Facebook评论插件未显示在AngularJS中全部内容，希望文章能够帮你解决javascript-Facebook评论插件未显示在AngularJS中所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/659590.html

来源：【匿名】