javascript - 使用 Javascript DOM 在 Header 中附加元素,并将其作为 Angular JS 中所有网页共享的公共标头
问题描述
我创建了一个带有“学习对象”数组的 json 文件。每个对象都有一个 id、一个名称和一个链接。
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 来做,但不幸的是它还没有工作。我的问题是我希望这个标题一直存在,而不是每次点击其中的链接时都加载。
我会感谢每一个帮助或建议!
干杯!
解决方案
调查<ng-view>
索引中 ng-view 之外的元素将保留在整个应用程序中,因此加载一次。您可以使用角度路由来控制 ng-view 中填充的内容。您应该路由您的部分以在其中加载。
推荐阅读
- c++ - c ++:程序崩溃,参数(按值)传递给lambda
- javascript - ngClass 不会根据变量值改变颜色
- ruby-on-rails - Rails 选择选项根据另一个选择动态变化(没有 ajax)
- parity - 获取最终区块数据
- spring - Spring Boot 谷歌云秘密管理器
- html - Blazor 双向绑定
- hive - Hive SQL - 在没有 `chr()` 的情况下测试 \u0000 (ascii 00)
- airflow - Airflow dag 未按计划运行(而其他计划同时运行)?
- c# - 从控制器操作返回 File(MemoryStream) 时出现内部 nlog 异常
- algorithm - 非退化多边形输出的 Sutherland-Hodgman 算法变体