为什么将 AngularJS 添加到页面会破坏它？我该怎么做才能让它正常运行？控件停止渲染。菜单停止扩展。
我试图将现有 Bootstrap 主题的 index.html 页面划分为部分/模板。不幸的是，一旦我将 HTML 移出 index.html，该分页上的控件就会中断。
我使用的主题是来自 WrapBootstrap.com 的 KingAdmin v1.3:https://wrapboo...
我添加的唯一标记是...
ng-app="app"
<div ng-include="'shell.html'"></div>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
shell.html 仅包含最初位于索引中的正文部分...
没有 Angular :
有 Angular :
INDEX.HTML:
<head>
<title>Dashboard | KingAdmin - Admin Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="KingAdmin - Bootstrap Admin Dashboard Theme">
<meta name="author" content="The Develovers">
<!-- CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen">
<!--[if lte IE 9]>
<link href="assets/css/main-ie.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/css/main-ie-part2.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/kingadmin-favicon144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/kingadmin-favicon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/kingadmin-favicon72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/ico/kingadmin-favicon57x57.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body class="dashboard">
<div ng-include="'shell.html'"></div>
<!-- Javascript -->
<script src="assets/js/jquery/jquery-2.1.0.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.js"></script>
<script src="assets/js/plugins/modernizr/modernizr.js"></script>
<script src="assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js"></script>
<script src="assets/js/king-common.js"></script>
<script src="assets/js/plugins/stat/jquery.easypiechart.min.js"></script>
<script src="assets/js/plugins/raphael/raphael-2.1.0.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.resize.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.time.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.pie.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.tooltip.min.js"></script>
<script src="assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="assets/js/plugins/datatable/jquery.dataTables.min.js"></script>
<script src="assets/js/plugins/datatable/dataTables.bootstrap.js"></script>
<script src="assets/js/plugins/jquery-mapael/jquery.mapael.js"></script>
<script src="assets/js/plugins/raphael/maps/usa_states.js"></script>
<script src="assets/js/king-chart-stat.js"></script>
<script src="assets/js/king-table.js"></script>
<script src="assets/js/king-components.js"></script>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
</body>
</html>
更新2014-11-25
我已经确认这不是我了。我有一个 friend 尝试使用 ng-include 标签将模板中的单个页面转换为 Angular 部分页面，并将其设置在适当的 Node.JS 服务器后面。他也得到了同样的结果。一旦 Angular 呈现第一页，大量功能就会中断。到处的展开/折叠逻辑停止工作。大多数控件都会正确停止渲染。
注意
有人提到这个问题可能是由于使用 ng-include 标签和部分文件而没有 Controller 而引起的。侧栏、顶栏、面包屑都通过 ng-include 作为静态 HTML/Jade 文件包含在内。主体 Controller 中传递了一条路由，但该区域也存在问题。
这里是开发者网站上模板的链接:
这是它目前的样子:
快速查看index.html页面的修改:
最佳答案
部分解决:
不确定这是否会被视为黑客攻击。对 jQuery 和 Angular 有更多了解的人可以/应该插话告诉你这是否安全。
仍未解决:
这似乎在第一次加载页面时有效。如果您离开页面并再次返回(例如使用后退按钮)，则该功能不起作用。我相信这是由于 Angular 注入(inject)主体而不是重新渲染整个页面......或脚本而发生的。在每个使用 jQuery 的模板中可能可以做一些事情(以某种方式重新初始化等)。
似乎有大量的问题/示例讨论了 DOM、jQuery 的类似问题，并使用超时来纠正它们:
AngularJS: How can I run a directive after the dom has finished rendering?
整个修复是在您的公共(public)资源脚本、king-common.js 等中。它们每个都有几个渲染函数，这些函数似乎是预先调用的，但 DOM 仍在渲染。
示例:
$(document).ready(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
});
通过将这些操作中的每一个包装在 setTimout 中，您可以推迟渲染，直到 DOM 修改之后:
$(document).ready(function(){
setTimeout(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
},1000);
);
这些已移至 script.jade/scripts.html 文件的尾部。最初这样做是为了延迟这些方法的触发，因此这可能是不必要的。尽管如此，这仍然是我们实现功能模板的一部分。
关于angularjs - 为什么添加 AngularJS 会破坏 Bootstrap 模板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26876519/