利用AngularJS中ng-include实现加载外部HTML文件并执行js
【摘要】
我试验过，直接使用异步通信加载的html文件，虽然可以显示静态页面，但是页面内的js却无法加载（当然也有办法加载，只是太麻烦了），但是现在有了AngularJS 我们纠结就可以直接加载html和里面的js代码了
实现起来特别简单：
* 第一步先引入AngularJS的js文件、
...
我试验过，直接使用异步通信加载的html文件，虽然可以显示静态页面，但是页面内的js却无法加载（当然也有办法加载，只是太麻烦了），但是现在有了AngularJS 我们纠结就可以直接加载html和里面的js代码了
实现起来特别简单：
* 第一步先引入AngularJS的js文件、
* 第二步在body处设置一个ng-app，
* 第三步就是设置一个ng-include在一个div中。
下面给出一个例子具体分析一下，是如何实现这一过程的：
新建 index.html文件
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>网站</title>
-
</head>
-
<body ng-app="">
-
<div id="header_id" ng-include="'include/header.html'"></div>
-
<div>我是body内容</div>
-
<div ng-include="'include/main_footer.html'"></div>
-
<!-- 引入angularjs-->
-
<script type="text/javascript" charset="utf-8" src="https://code.angularjs.org/1.7.5/angular.min.js"></script>
-
</body>
-
</html>
新建 main_footer.html 文件
-
<header>
-
<div class="logo f_l">
-
<a href="#">
-
<img src="images/logo.png">
-
</a>
-
</div>
-
<nav id="topnav" class="f_r">
-
<ul id="topnav_id">
-
<a href="index.html" id="topnav_current">首页</a>
-
<a href="knowledge.html" >技术博客</a>
-
<a href="new.html" >情感生活</a>
-
<a href="moodlist.html" >旅游风景</a>
-
<a href="knowledge1.html" >爱好娱乐</a>
-
<a href="knowledge2.html" >英文学习</a>
-
<a href="knowledge3.html" >网站留言</a>
-
</ul>
-
</nav>
-
</header>
-
-
-
-
<script type="text/javascript" src="./js/uEditor/ueditorInit.js"></script>
-
-
-
-
<script type="text/javascript">
-
//此处的js代码也会执行哦
-
alert(111);
-
</script>
注意，AngularJS引入的html文件只能加载script标签内的代码。被引入的html 内如果有加载外部js的话是不会执行的
文章来源: yexindong.blog.csdn.net，作者：java叶新东老师，版权归原作者所有，如需转载，请联系作者。
原文链接：yexindong.blog.csdn.net/article/details/84944410
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）