如何为Facebook共享动态设置和Angular JS页面的元标记？

Question

这个问题与我几天前问过的this one密切相关。

我正在构建angularJS Web应用程序。我目前正在尝试使用ngMeta模块来允许网络应用程序为页面标题和元标记生成动态条目，以便“Facebook知道在用户发布时显示图像，标题和说明从我的网络应用程序链接。我正在使用Facebook's public-facing debugger来帮助我解决此问题。

但它不适合我。这是我用于我的网络应用程序的Splash页面的状态：

  $stateProvider.state('splash', {
          url: '/',
          templateUrl: 'html/splash.html',
          controller: 'SplashCtrl',
          data: {meta: {'title': 'XXXXXXXXXXXX',
                        'description': 'YYYYYYYYYYYY'}}});

这是我的控制器：

myApp.controller('SplashCtrl', function($scope, ngMeta) {
    var self = this;
    console.log('self = ', self);

    ngMeta.setTag('description', 'DDDDDDDD');

这是我的index.html

这是我的模板文件splash.html，它在状态声明中引用：

<div ng-controller="SplashCtrl as splashCtrl">
    HELLO WORLD
</div>

当我刮掉这个Splash页面时，看看Facebook的调试器报告的内容（仅供参考，我的私人信息已被删除）：

为什么我在SplashCtrl（'DDDDDDDD'）中设置的描述不是出现在Facebook的刮刀中？我该如何修复呢？

BTW，我已经使用run()块成功初始化了ngMeta。我知道它有效，因为当我加载此页面时，来自<title>{{ngMeta.title}}</title>的{​​{1}}正确显示为index.html。

所以ngMeta.setTitle（）肯定有效。那么如何设置和访问描述，图像等其他属性？

Answer 1

您的所有元标记都具有良好的约束力，您可以通过检查页面来查看它

This

我认为这个facebook工具正在阅读你的页面的源代码而不是初始化的角度应用程序（好像你在chrome中使用CTRL + U查看源代码，你会看到数据不是模板化的）

这与从角度应用程序共享内容无关。 Facebook将注意阅读绑定值而不是范围变量

但是，如果您不想要源代码中的范围变量，  {{3}}回答可能是一个解决方案