使用 Javascript DOM 在 Header 中附加元素，并将其作为 Angular JS 中所有网页共享的公共标头答案

【问题标题】：Appending elements in Header using Javascript DOM and having it as a common header shared by all webpages in Angular JS使用 Javascript DOM 在 Header 中附加元素，并将其作为 Angular JS 中所有网页共享的公共标头
【发布时间】：2018-10-22 08:11:57
【问题描述】：

我创建了一个带有“学习对象”数组的 json 文件。每个对象都有一个 id、一个名称和一个链接。

这里是my plnkr example

var myMessage = {
"learnobjects": [{
    "id": "1",
    "name": "Animation-Basics",
    "link": "animation_basics.html",

},    
{
    "id": "2",
    "name": "Interpolation",
    "link": "interpolation.html",

}
]}

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.learnobjects.length; i++) {
var id = jsonData.myMessage[i].id;
var name = jsonData.myMessage[i].name;
var link = jsonData.myMessage[i].link;


var mainPath = document.createElement('a');
    mainPath.className = 'w3-bar-item w3-mobile w3-border-right';
    mainPath.id = id;
    mainPath.href = link;
    mainPath.innerHTML =
    name + '</a>';
    document.getElementById('myHeader').appendChild(mainPath);
}
var myApp = angular.module('myApp', []);

function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}

索引.html：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<link rel="stylesheet" href="style.css">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
<div ng-controller="HeaderCtrl">
    <div ng-include src="header.url"></div>
    <script type="text/ng-template" id="header.html"></script>
  </div>
  <p> Index </p>
</body>

</html>

没有 Angular JS ($scope) 它可以工作，但每次我点击标题中的链接时，元素每次都会再次加载。我正在尝试用 AngularJS 来做，但不幸的是它还没有工作。我的问题是我希望这个标题一直存在，而不是每次点击其中的链接时都加载。

我会感谢每一个帮助或建议！

干杯！

【问题讨论】：

实现目标的 AngularJS 机制称为组件。您正在使用 AngularJS，因此它会让您头疼。使用框架，你会更成功。docs.angularjs.org/guide/component

标签： javascript html angularjs json dom

【解决方案1】：

查看<ng-view>

索引中 ng-view 之外的元素将保留在整个应用程序中，因此加载一次。您可以使用角度路由来控制 ng-view 中填充的内容。您应该路由您的部分以在其中加载。

【讨论】：

非常感谢！是否可以进行动态路由，如果可以，那么我的问题将得到解决:)
如果 AngularJS 会从 json 文件中获取链接的输入