Я создал json-файл с массивом «изучаемых объектов».У каждого объекта есть идентификатор, имя и ссылка.
Вот мой пример plnkr
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"};
}
Index.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>
Без углового JS ($ scope) это работало, но каждый раз, когда я нажимал на ссылку в заголовке, элементы загружались снова каждый раз.Я пытаюсь сделать это с AngularJS, но, к сожалению, он пока не работает.Моя проблема в том, что я хочу, чтобы этот заголовок был там все время, а не загружался каждый раз, когда я нажимаю на ссылку в нем.
Я был бы благодарен за любую помощь или предложение!
Ура!