16

我正在使用多个视图创建一个网站。页面的标签和标签通过 $rootScope 变量进行更改。所以我有类似的东西

<html>
<head>
   <title ng-bind="page_title"></title>
   <meta property="og:title" content="{{page_title}}">
</head>

每当在网站上加载每个视图时，page_title 变量都会更改，并且 title 和 og:title 标签会更新（一切都按预期工作）。

问题是我需要在某些视图上加载 facebook、google+ 和 twitter 按钮。我可以正确显示它们，但是如果我单击每个它们，页面标题似乎类似于：

{{page_title}}

我尝试使用 setTimeOut 来延迟每个按钮的脚本的执行，但效果不佳。但是脚本只是读取所写的内容，它们不解析 page_title。

有人知道解决方法吗？

谢谢

4

2 回答 2

29

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

  1. 您可以允许您的服务器端技术呈现内容。
  2. 您可以使用 PhantomJS 方法https://github.com/steeve/angular-seo。
于 2013-07-08T18:24:06.727 回答
1

您还可以重新渲染 Facebook 小部件。使用他们的parse方法：

FB.XFBML.parse();

在你的角度东西完成后。它不适用于我的分享按钮（还没有！！），但我在喜欢的情况下对其进行了测试，这很酷。基本上它会重新扫描 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]);
        }
    };
});

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

于 2013-12-05T02:02:10.247 回答