Angularjs 显示Facebook链接帖子的缩略图

我正在做一个项目，我遇到了一个棘手的情况，我想显示Facebook页面上的链接帖子的缩略图，例如，如果我在Facebook页面上共享一个图像链接，它会在那里显示图像，当我调用Facebook graph api时，我会得到一个对象，其中源类型被称为链接，有一个包含实际链接的源字段，我想知道如何显示该帖子的缩略图。我现在看到的是这样的，下面有一张图片和代码……我想要的是像Facebook那样的缩略图预览或者类似的东西

我从Facebook获得的对象具有以下信息：

 Object
$$hashKey: "object:178"
created_time: "2016-03-06T19:54:19+0000"
from: Object
full_picture: "https://external.xx.fbcdn.net/safe_image.php?d=AQDWMrj1iWI3vY7l&url=http%3A%2F%2Fmedia.aintitcool.com%2Fmedia%2Fuploads%2F2013%2Fnordling%2Fkirkhammett.jpg"
id: "1745326375703342_1750176341885012"
is_published: true
link: "http://media.aintitcool.com/media/uploads/2013/nordling/kirkhammett.jpg"
type: "link"
__proto__: Object
1: Object
$$hashKey: "object:179"
created_time: "2016-03-06T19:53:05+0000"
from: Object
full_picture: "https://external.xx.fbcdn.net/safe_image.php?d=AQCVutS4_1xuW9Ap&url=http%3A%2F%2Fcdn.sstatic.net%2Fstackoverflow%2Fimg%2Fapple-touch-icon%402.png%3Fv%3D73d79a89bded%26a"
id: "1745326375703342_1750176195218360"
is_published: true
link: "http://stackoverflow.com/questions/3367415/get-epoch-for-a-specific-date-using-javascript"
type: "link"
__proto__: Object
2: Object
$$hashKey: "object:180"
created_time: "2016-03-06T19:51:51+0000"
from: Object
full_picture: "https://external.xx.fbcdn.net/safe_image.php?d=AQDISk6oZ8T_zx1k&w=720&h=720&url=https%3A%2F%2Fi.ytimg.com%2Fvi%2FcGudW81cw98%2Fmaxresdefault.jpg&cfs=1"
id: "1745326375703342_1750176091885037"
is_published: true
link: "https://www.youtube.com/watch?v=cGudW81cw98"
source: "https://www.youtube.com/embed/cGudW81cw98?autoplay=1"
type: "video"

我还想展示视频，现在有些视频播放，但其他像youtube上的视频不播放，我现在不想挂断

我有一个角度指令，用于完成所有任务，代码如下：

angular.module("TimelineModule", [])
    .directive('contentItem', function ($compile) {

            var photoTemplate = "<ul class='timeline'><li ng-class='{\"timeline-inverted\": content.is_published}'><div class=timeline-badge ng-class=\"{'success': content.is_published}\"><i class='fa fa-check'></i></div><div class=\"timeline-panel\"><div class=\"timeline-heading\"> <h4 class=\"timeline-title\">{{ content.from.name }}</h4><p><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> {{content.created_time | date}} </small><br/><span ng-if='content.is_published == false'><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> {{content.scheduled_publish_time*1000 | date}} </small><br/></span> <small class=\"text-muted\"><i class=\"fa fa-eye\"></i>someViews</small><br/></p></div><div class=\"timeline-body\"><br/><img ng-src=\"{{ content.full_picture }}\" alt='entry photo' width='100%' height='100%'></div></div></li></ul>";
            var statusTemplate = "<ul class='timeline'><li ng-class='{\"timeline-inverted\": content.is_published}'><div class='timeline-badge' ng-class=\"{'success': content.is_published}\"><i class='fa fa-check'></i></div><div class='timeline-panel'><div class='timeline-heading'><h4 class='timeline-title'>{{ content.from.name }}</h4><p><small class='text-muted'><i class='fa fa-clock-o'></i> {{content.created_time | date}}</small><br/><span ng-if='content.is_published == false'><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> {{content.scheduled_publish_time*1000 | date}} </small><br/></span><small class='text-muted'><i class='fa fa-eye'></i> Some views </small></p></div><div class='timeline-body'><p>{{content.message}}</p></div></div></li></ul>"
            var videoTemplate = "<ul class='timeline'><li ng-class='{\"timeline-inverted\": content.is_published}'><div class=\"timeline-badge\" ng-class=\"{'success': content.is_published}\"><i class=\"fa fa-check\"></i></div><div class=\"timeline-panel\"><div class=\"timeline-heading\"><h4 class=\"timeline-title\">{{ content.from.name }}</h4><p><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> {{content.created_time | date}} </small><br/><span ng-if='content.is_published == false'><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> {{content.scheduled_publish_time*1000 | date}} </small><br/></span><small class=\"text-muted\"><i class=\"fa fa-eye\"></i>someViews</small><br/></p></div><div class=\"timeline-body\"><p>{{ content.message }}</p><br/><video autoplay ng-src=\"{{ trustSrcFunction({src: source}) }}\" controls width='100%' height='100%' frameborder='0' allowFullScreen type=\"video/youtube\"></video></div></div></li></ul>";
            var linkTemplate = "<ul class='timeline'><li ng-class='{\"timeline-inverted\": content.is_published}'><div class=\"timeline-badge\" ng-class=\"{'success': content.is_published}\"><i class=\"fa fa-check\"></i></div><div class=\"timeline-panel\"><div class=\"timeline-heading\"><h4 class=\"timeline-title\">{{ content.from.name }}</h4><p><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> {{content.created_time | date}} </small><br/><span ng-if='content.is_published == false'><small class=\"text-muted\"><i class=\"fa fa-clock-o\"></i> {{content.scheduled_publish_time*1000 | date}} </small><br/></span><small class=\"text-muted\"><i class=\"fa fa-eye\"></i>someViews</small><br/></p></div><div class=\"timeline-body\"><p>{{ content.message }}</p><br/><a target=\"_blank\" href=\"{{ content.link }}\">Shared a link</a></div></div></li></ul>";

            var getTemplate = function (contentType) {
                var template = '';

                switch (contentType) {
                    case 'photo':
                        template = photoTemplate;
                        break;
                    case 'video':
                        template = videoTemplate;
                        break;
                    case 'status':
                        template = statusTemplate;
                        break;
                    case 'link':
                        template = linkTemplate;
                        break;
                }

                return template;
            };

            var linker = function (scope, element) {
                element.html(getTemplate(scope.content.type));
                $compile(element.contents())(scope);
            };

            return {
                restrict: 'E',
                link: linker,
                scope: {
                    content: '=',
                    trustSrcFunction: '&'
                }
            };
        }
    );

角度模块（“TimelineModule”，[]） .directive（'contentItem'，函数（$compile）{ var photoTemplate=“

• {{content.from.name}{content.created'u time | date}}
  {content.scheduled'u publish|time*1000 | date}
  someViews
  {content.message； var linkTemplate=“
  • {{content.from.name}{{content.created'u time | date}}
    {content.scheduled'u publish|time*1000 | date}
    someViews
    {content.message； var getTemplate=函数（contentType）{ var模板=“”； 开关（contentType）{ 案件‘照片’： 模板=光模板； 打破 案例“视频”： 模板=视频模板； 打破 案例“状态”： 模板=状态模板； 打破 “链接”案例： 模板=链接模板； 打破 } 返回模板； }; 变量链接器=函数（范围、元素）{ html（getTemplate（scope.content.type））； $compile（element.contents（））（范围）； }; 返回{ 限制：'E'， 链接：链接器， 范围：{ 内容：“=”， trustSrcFunction:“&” } }; } );

    ---

    您最好使用embedded posts API-请参阅-他们首先引用的URL中的ID就是您在上一个请求中得到的ID。
    因此，我尝试使用我在对象中得到的permalink_URL，但angular js指令没有编译div标记来显示embedded post…：（将返回的div封装在模板中应该相对简单——事实上，我们已经做到了这一点，但我不能共享代码，否则我会被射杀！