Question

为什么在页面中添加AngularJS会破坏它？我该怎么做才能让它正常运作？控件停止渲染。菜单停止扩张。

我试图将现有Bootstrap主题的index.html页面划分为partials / templates。不幸的是，只要我将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

没有角色：

enter image description here

WITH 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
我已经证实这不是我。我有一个朋友试图使用ng-include标签将模板中的单个页面转换为Angular partials并将其设置在正确的Node.JS服务器后面。他有同样的结果。一旦Angular呈现第一页，大量功能就会中断。扩展/崩溃逻辑到处停止工作。大多数控件都会停止正确渲染。

注意
有人提到问题可能是由于使用了ng-include标签和部分文件而没有包含控制器的部分文件。侧栏，顶栏，面包屑都通过ng-include作为静态HTML / Jade文件包含在内。路径正在控制器中传递给主体，但是这个区域也存在问题。

以下是开发人员网站上模板的链接：

KingAdmin Dashboard Theme

以下是目前的情况：

enter image description here

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

enter image description here

Answer 1

部分解决：
不确定这是否会被视为黑客攻击。对jQuery和Angular有更多了解的人可以/应该插手告诉你这是否安全。

仍然无法解决：
这在第一次加载页面时似乎有效。如果您离开页面并再次返回（例如，使用后退按钮），它将不起作用。我相信这是由于Angular注入身体而不是重新渲染整个页面......或脚本。可能在每个使用jQuery的模板中都可以完成某些事情（以某种方式重新初始化等）。似乎有很多问题/例子讨论DOM，jQuery和使用超时纠正它们的类似问题：

AngularJS: How can I run a directive after the dom has finished rendering?

整个修复程序与您的公共资源脚本，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);
);

这些已移至scripts.jade / scripts.html文件的尾部。这最初是为了延迟这些方法的触发，所以这可能是不必要的。不过，这是我们如何找到一个正常运作的模板的一部分。

Answer 2

你的问题是Bootstrap没有注意页面上新创建的元素为你编写角度。您可以创建可以调用Bootstrap jQuery方法的指令，该方法将Bootstrap绑定添加到元素中，例如（$('.dropdown').dropdown()）。

有一个很棒的AngularJS库取代了bootstrap.js的角度无关重写，可以为您解决这个问题：http://angular-ui.github.io/bootstrap/

对于快速入侵，如果您希望.dropdown类的所有元素都使用Bootstrap下拉列表，您可以创建这样的指令。

angular.module('app')

        // Directives: https://docs.angularjs.org/guide/directive
       .directive('dropdown', [

        // Use window dependency
        '$window',

        // Returns a directive
        function ($window) {

            return {
                // Restrict to attribute, or class name so can be used like so:
                //
                // <a class="dropdown btn btn-primary">Dropdown button</a>
                // or
                // <a dropdown class="btn btn-primary">Dropdown button</a>
                restrict: 'AC',

                link: {
                    post: [

                        // This dependency gives you the element with
                        // the directive wrapped as a jQuery object
                        '$element',

                        function ($element) {
                            $element.dropdown();
                        }
                    ]
                }
            };

        })

Answer 3

我认为你应该重新考虑你的依赖关系。 UI中断的元素似乎需要jquery，例如：jquery.easypiechart.min.js

在https://docs.angularjs.org/misc/faq，您可以阅读：

Angular是否使用jQuery库？是的，Angular可以使用jQuery if   当应用程序被引导时，它会出现在您的应用程序中。   如果脚本路径中不存在jQuery，则Angular会回退到   它自己实现的jQuery子集，我们称之为jQLite。

Angular 1.3仅支持jQuery 2.1或更高版本。 jQuery 1.7和更新版本   可能与Angular正常工作但我们不能保证。

请注意，angular需要jQuery 2.1或更高版本，而Bootstrap需要最新的1.1.x版本的jQuery（由于jQuery 2不支持IE8，Bootstrap不支持jQuery 2+）。

阅读完上述内容后，您还应阅读：

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

3 个答案: