头部中的 Angularjs 组件被渲染到正文中

Posted

技术标签:

【中文标题】头部中的 Angularjs 组件被渲染到正文中【英文标题】:Angularjs component in head gets rendered into body 【发布时间】:2019-12-14 19:39:58 【问题描述】:

我正在尝试创建一个组件(此处命名为“meta-info”),它将带有动态信息(通过 Rest-Webservice 获取)的元标记呈现到头部 -标签。

问题是:在处理的 html 中,组件不会留在头部,而是作为第一个元素呈现到正文中,并且头部中的每个脚本和样式标记都在组件之后在代码中也被移动到正文中。就像组件自动打开一个 body-tag 一样。 :-(

有人知道如何实现我的需要吗?

<!DOCTYPE html>
<html lang="de" class="app-basic-an" ng-app="app">
    <head>
        <meta charset="utf-8">
        <title ng-bind="$ctrl.title"></title>
        <meta http-equiv="cache-control" content="no-cache, no-store">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta-info></meta-info>

        [...]
    </head>

    <body>
       [...]
    </body>
</html>

【问题讨论】:

【参考方案1】:

AngularJS 不允许视图设置页面标题并在头部插入额外的元素。

尝试使用附加模块angularjs-viewhead

https://github.com/apparentlymart/angularjs-viewhead

var app = angular.module('myApp', ['viewhead']);
<meta view-head name="description" content=metaDescription>

【讨论】:

以上是关于头部中的 Angularjs 组件被渲染到正文中的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS - 将路由组件保存在缓存中(保持活动状态)

angularjs学习笔记--$http数据渲染到表格路由依赖注入provider

AngularJS:AngularJS 渲染模板后如何运行附加代码?

angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?

html head 中的条件渲染 css

如何确定 AngularJS 何时完成渲染所有组件和指令