<head> 标签上的 Angularjs 1.5 ng-controller答案

【问题标题】：Angularjs 1.5 ng-controller on the <head> tag<head> 标签上的 Angularjs 1.5 ng-controller
【发布时间】：2017-08-31 09:31:49
【问题描述】：

我正在使用 Angularjs 1.5。

创建了一个服务来处理 META 数据和页面标题。尝试应用它。

问题是 - 出于某种原因，如果我直接在 <head> 标签上定义控制器：

<head ng-controller="headMetaController">

控制器根本不会被加载，但如果我用<head>将它包装在额外的<div>中：

<head>
<div ng-controller="headMetaController">
    <title ng-bind="seoMetaService.title()"></title>
    <meta name="description" content="{{ seoMetaService.metaDescription() }}">
    <meta name="keywords" content="{{ seoMetaService.metaKeywords() }}">
<div>
</head>

=> 有效。

所以，我猜它与 <head> 标签特别相关 => 不确定，解决它的正确方法是什么？我还担心将元数据放在额外的 <div> 中对于 SEO 目的可能不是一个好主意？

【问题讨论】：

你想做什么？
将ng-controller 移动到您的<html> 标签。您将在该标签上同时拥有 ng-app 和 ng-controller。

标签： javascript angularjs seo

【解决方案1】：

首先，我认为<div> 不是位于<head> 标签内的有效标签，因为该标签仅适用于元数据、脚本、样式和其他不适用的内容显示出来。

其次，即使您这样调用控制器，也不意味着您可以访问head 标签内的控制器变量。只有服务/工厂可以在head 标签内调用。

所以不要从 head 标签调用控制器，而是从 html 标签或 body 标签或内部正文标签调用控制器

【讨论】：

好的，谢谢div。关于控制器 - 如果我在 head 标签上使用它，它只是没有被初始化。 html 标签 - 我有另一个控制器用于全局功能..
head 标签中的控制器实际上没有被初始化。这就是为什么我们使用服务而不是控制器来访问 head 标签内的数据的原因。你可以在 body 标记内嵌套控制器。
控制器在头脑中 - 清楚，谢谢。但是如何在没有控制器作为中间件的情况下直接在 html 中使用服务？谷歌搜索显示我必须绑定一个服务介绍控制器的 $scope 变量。
检查这个答案我想你会知道stackoverflow.com/questions/16119398/…

【解决方案2】：

如果您担心 SEO，您将不得不从另一个角度来解决这个问题。

除了<div> 在<head> 内部无效之外，对<meta> 值使用插值是一个危险信号。关心这些标签的爬虫不会看到它们，而是会看到{{ seoMetaService.metaKeywords()}}，这显然对 SEO 不利。

解决方案 A：在服务器端呈现这些值。

解决方案 B：保留现有内容，但指示抓取工具在其他位置访问您的页面。添加<meta name="fragment" content="!">，并允许您呈现页面的快照存在于其他位置，并在将?_escaped_fragment_= 添加到URL 时提供。您可以将此部分委托给prerender.io 或类似的服务，它们将扫描和存储您的页面。

【讨论】：

{{ seoMetaService.metaKeywords()}} 但是这种东西应该被渲染，不是吗？据我了解，谷歌现在部分支持 js 框架，不是吗？
在大多数情况下，爬取元数据的爬虫程序和爬虫程序不运行 javascript。例如，如果您将网站的 URL 粘贴到 Facebook 的分享框中，它将显示 {{foo.title}}。