个人中心
gpt4 book ai didi

angularjs - 为什么添加 AngularJS 会破坏 Bootstrap 模板？

转载 作者：行者123 更新时间：2023-12-02 22:28:45 25 4
gpt4 key购买 nike

为什么将 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 仅包含最初位于索引中的正文部分...

enter image description here

没有 Angular :

enter image description here

有 Angular :

enter image description here

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 中传递了一条路由，但该区域也存在问题。

这里是开发者网站上模板的链接:

KingAdmin Dashboard Theme

这是它目前的样子:

enter image description here

快速查看index.html页面的修改:

enter image description here

最佳答案

部分解决:
不确定这是否会被视为黑客攻击。对 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/

25 4 0
文章推荐： MediaWiki 类别不会自动更新
文章推荐： javascript - 有没有可以发出 LLVM 字节码的 Javascript 引擎？
文章推荐： ms-access - 捕捉粘贴事件？
文章推荐： sql-server - SQL Server - 我“真正”需要多少用户？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com