AngularJS实现通用头部：解决点击链接重复加载DOM元素问题

嘿，我来帮你搞定这个AngularJS头部重复加载的问题～先梳理下你现有代码里的几个关键问题，再给你一套完整的解决方案：

你当前的代码存在几个冲突和错误，导致了重复加载的问题：

• 原生JS与Angular的冲突：你混合使用了原生DOM操作和Angular的控制器，这违背了Angular数据驱动的理念，手动DOM操作会在控制器重复初始化时重复创建元素。
• 数据处理错误：myMessage已经是一个JS对象，不需要用JSON.parse解析；而且你访问数组元素时错误地写了jsonData.myMessage[i]，正确的应该是jsonData.learnobjects[i]。
• DOM操作错误：创建a标签时，innerHTML里多写了</a>，会导致HTML嵌套错误。
• Angular依赖缺失：你的index.html里没有引入AngularJS的核心脚本，这也是Angular功能无法正常工作的原因。

我们完全用Angular的数据驱动方式来实现，避免手动DOM操作，确保头部只渲染一次，不会重复加载。

完整修正代码 #

script.js #

var myApp = angular.module('myApp', []);

myApp.controller('HeaderCtrl', function($scope) {
  // 直接把学习对象数据绑定到$scope，供模板使用
  $scope.learnobjects = [
    { "id": "1", "name": "Animation-Basics", "link": "animation_basics.html" },
    { "id": "2", "name": "Interpolation", "link": "interpolation.html" }
  ];
  
  // 头部模板的配置
  $scope.header = { url: "header.html" };
});

index.html #

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="style.css">
  <!-- 必须引入AngularJS核心脚本 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.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>
  </div>
  
  <!-- 页面主体内容 -->
  <p>Index</p>

  <!-- 定义头部的模板内容，用Angular指令渲染链接 -->
  <script type="text/ng-template" id="header.html">
    <div class="w3-bar">
      <!-- ng-repeat自动循环生成链接，不会重复渲染 -->
      <a 
        ng-repeat="item in learnobjects"
        class="w3-bar-item w3-mobile w3-border-right"
        id="{{item.id}}"
        href="{{item.link}}"
      >
        {{item.name}}
      </a>
    </div>
  </script>
</body>
</html>

• 移除手动DOM操作：用Angular的ng-repeat指令替代原生JS创建元素，完全遵循数据驱动的模式，Angular会自动管理DOM渲染，避免重复创建元素。
• 修正数据逻辑：直接把数据绑定到$scope，不需要多余的JSON.parse，也解决了之前的属性访问错误。
• 确保头部常驻：ng-include在控制器初始化时只会加载一次模板，只要HeaderCtrl不被重复实例化，头部就会保持常驻状态，不会重复加载。
• 补全Angular依赖：添加了AngularJS核心脚本的引入，确保Angular功能正常运行。

内容的提问来源于stack exchange，提问作者Basch