Geek Answers Handbook

Why does adding AngularJS break the Bootstrap pattern?

Why does adding AngularJS to the page break it? What can I do to make it work correctly? Controls the stop of rendering. Menus cease to expand.

I am trying to split the index.html page of an existing Bootstrap theme into partials / templates. Unfortunately, as soon as I move the HTML from index.html, the controls on this page break.

The theme I'm using is KingAdmin v1.3 from WrapBootstrap.com: https: // wrapboo ...

The only markup I add is ...

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 only contains the body part that was originally in the index ...

enter image description here

WITHOUT ANGULAR:

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
, . Angular , ng-include Node.JS-. . Angular , . expand/collapse . .


- , ng-include , contoller. , , HTML/Jade ng-include. , .

:

KingAdmin

:

enter image description here

index.html:

enter image description here

+4
3

:
, . -, jQuery Angular, / , , .

STILL UNRESOLVED:
, , . , (, "" ). , - Angular ... . , -, , jQuery (- ..). , /, DOM, jQuery - :

AngularJS: , dom ?

, 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. , . , , .

+3

, Bootstrap , angular . , Bootstrap jQuery, Bootstrap , ($('.dropdown').dropdown()).

AngularJS, angular bootstrap.js, : http://angular-ui.imtqy.com/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();
                        }
                    ]
                }
            };

        })
+2

, . , , , jquery, : jquery.easypiechart.min.js

https://docs.angularjs.org/misc/faq :

Angular jQuery? , Angular jQuery, , . jQuery script, Angular jQuery, jQLite.

Angular 1.3 jQuery 2.1 . jQuery 1.7 Angular, .

, Angular jQuery 2.1 , Bootstrap jQuery 1.1.x(Bootstrap jQuery 2+ - , jQuery 2 IE8).

:

+1
source

More articles:


All Articles