在 Facebook 上分享时，显示 angular 括号而不是内容

Question

AngularJS 将内容很好地渲染到标题和元标记中，但是当我与 facebook 或 google 共享它时，在弹出窗口 window 中显示 angular { { }} 那里。

代码：

<div ng-controller="MyCtrl">
 <title>{{mDetails.display1}} - Subtitle</title> 
<meta name="description" content="{{mDetails.display1}} - {{mDetails.address1}} , {{mDetails.city}}, {{mDetails.state}}, {{mDetails.country}}">
.
.

注意：我已经在使用 ng-cloak。

感谢您的帮助。

Answer 1

两种方式，如另一个问题所述：- og meta tags, social buttons and angularjs

方法一：-

这无法使用 javascript 完成。有些人认为 Facebook 正在阅读当前页面上的内容。不是。它使用它的 Scraper 使用相同的 url（来自 window.location.href）向您的服务器发出单独的请求，而 Facebook Scraper 不会运行 javascript。这就是为什么您在单击 Facebook 分享按钮之类的内容时会得到 {{page_title}} 的原因。您的内容必须由服务器生成，因此当 Facebook 去点击 url 时，它会预先获得所需的内容，而不需要 javascript。您可以通过几种方式处理服务器端渲染。

You can allow your server side technology to render the content.
You can use the PhantomJS approach https://github.com/steeve/angular-seo.

方法二：-

您还可以重新呈现 Facebook 小部件。使用他们的解析方法：

FB.XFBML.parse();

在您的 angular 内容完成后。它不适用于我的分享按钮（还没有！！），但我对它进行了点赞测试，它很酷。基本上它会重新扫描 DOM 并呈现 Facebook 小部件。您还可以将单个元素传递给它，类似于此指令：

'use strict';    
angular.module('ngApp')
.directive("fbLike", function($rootScope) {
    return function (scope, iElement, iAttrs) {
        if (FB && scope.$last) {
           FB.XFBML.parse(iElement[0]);
        }
    };
});

当在 angular 转发器中创建最后一个元素时，此代码段将重新扫描 DOM 以获得 html5 类似 facebook fb 的小部件。

同一上下文中另一个接受的答案：-

编辑：

我在服务器端实现了 json 只是为了元标记，但是这是一个开销，因为对于页面数据，仍然有 ajax 调用。

$mid=$_GET['id'];
    $mJSON = file_get_contents($homeurl."/json/getdetail.php?mid=".$mid);
    $mObject = json_decode($mJSON, true);
    if ($mObject['ID'] != undefined && $mObject['ID'] != '') {
      <meta property="og:title" content="<?php echo $mObject['display1'];?>"/>
      <meta property="og:description" content="<?php echo .$mObject['display2']; ?>"/>
     }

Answer 2

一种对我有用的可能性是为 FB 描述添加 "fallback"（因此它将是一个通用描述，显示 angular 尚未加载）。我用两个 ng-if.

实现了这个

<meta ng-if="mDetails.display1" property="og:title" content="{ mDetails.display1 + "- Subtitle"}}">
<meta ng-if="!mDetails.display1" property="og:title" content="A generic title">

每当有两个相同标题的元描述时，FB 将取最后一个。渲染后，googlebot 只会看到 non-default 个。

在 Facebook 上分享时，显示 angular 括号而不是内容

When sharing on facebook, showing angular brackets instead of content

angularjs

angularjs-scope