如何在AngularJs 1.x中动态更改元标题，元关键字，元描述？

Question

我计划使用AngularJS 1.x动态更改元标题，Meta关键字和元描述，以反映在Facebook，Twitter，Google Plus和LinkedIn中。

有没有办法动态改变？我正在使用REST Api调用。

谢谢， -Venkat

Answer 1

我建议您使用Tristan建议的this库。它工作得很好。并且还与动态表达式兼容。

要更新元标记，您只需在视图中使用以下标记：

<update-title title="A new title"></update-title>
<update-meta charset="ISO-8859-1"></update-meta>
<update-meta http-equiv="Content-Language" content="es"></update-meta>
<update-meta name="description" content="A page specific description"></update-meta>
<update-meta property="og:title" content="Minions"></update-meta>
<update-meta itemprop="description" content="A page specific itemprop description"></update-meta>

您可以使用以下命令安装它：

bower install angular-update-meta

希望它会对某人有所帮助。

Answer 2

使用Angular-update-meta，它将帮助您动态更新元标记。

https://github.com/jvandemo/angular-update-meta

Answer 3

您可以使用ng-bind动态创建任何代码的内容。

例如：

<title ng-bind="pageTitle()"></title>

然后在你的控制器中：

$scope.pageTitle = function () {
    return 'the page title you want to add dynamically';
};

Google现在呈现javascript，因此动态页面标题和元标记将被正确编入索引。

Answer 4

我也遇到了这个问题所以我为此创建了一个库。您可以查看over here。

您可以通过两种方式使用它：

1. 对于您使用ui-router定义的每个州，您可以附加以下自定义数据：simpleSeoTitle，simpleSeoDescription，simpleSeoKeywords。这三个，只要状态处于活动状态，就会更改页面的标题，说明或关键字。

2. 它还公开了一个名为simpleSeoService的服务。此服务有3个属性，title,个描述, and个关键字`。这3个定义为getter和setter。当您具有要附加的动态属性时，这些功能非常有用。