Почему добавление AngularJS нарушает шаблон Bootstrap?

Почему добавление AngularJS на страницу нарушает его? Что я могу сделать, чтобы он работал правильно? Управляет остановкой рендеринга. Меню перестают расширяться.Почему добавление AngularJS нарушает шаблон Bootstrap?

Я пытаюсь разделить страницу index.html существующей темы Bootstrap на partials/templates. К сожалению, как только я вывожу HTML из index.html, элементы управления на этой странице разбиваются.

Тема я использую KingAdmin v1.3 от WrapBootstrap.com: 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

с угловыми:

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>

UPDATE 2014-11-25
Я подтвердил, что это не я. У меня была попытка друга преобразовать одну страницу в шаблоне в Angular partials, используя теги ng-include и настроив ее за собственный Node.JS-сервер. У него были такие же результаты. Как только Angular отображает первую страницу, количество функциональности ломается. логика expand/collapse везде перестает работать. Большинство элементов управления перестают правильно рисовать.

Примечание
Кто-то отметил, что проблема может быть вызвана использованием нг-теги и включают партиалы без частичного файла, имеющего регулятора,. Боковая панель, верхний бар, сухарь все включены в качестве статических файлов HTML/Jade через ng-include. Маршрут проходит в контроллере для основного корпуса, однако проблемы существуют и в этой области.

Вот ссылка на шаблон на сайте разработчика:

KingAdmin Dashboard Theme

А вот как она в настоящее время выглядит:

enter image description here

Быстрый взгляд на модификации с индексом ,HTML-страница:

enter image description here

источник

2014-11-11 Ryan D' Baisse

Любые ошибки в консоли? –

Единственной ошибкой был файл карты jquery. Шаблон не включал все файлы jquery. Однако я добавил папку с обновленным jQuery и всеми связанными файлами, и ошибка исчезла. Это не изменило результаты выше. –

для правильного заполнения глификонов, похоже, связано с вашим html-сжатием или механизмом шаблонов, который удаляет промежутки между тегами. Для остальных кажется, что угловой не работает – nicolas

Я думаю, вы должны пересмотреть свою зависимость. Элементы сломанные в вашем пользовательском интерфейсе, кажется, требует JQuery, например: jquery.easypiechart.min.js

В https://docs.angularjs.org/misc/faq вы можете прочитать:

ли Угловая использовать библиотеку JQuery? Да, Angular может использовать jQuery, если присутствует в вашем приложении, когда приложение загружается. Если jQuery отсутствует в вашем пути к скрипту, Angular возвращается к своей собственной реализации подмножества jQuery, которое мы называем jQLite.

Угловой 1.3 поддерживает только jQuery 2.1 или выше. jQuery 1.7 и новее могут работать правильно с помощью Angular, но мы этого не гарантируем.

Обратите внимание, что угловые требует Jquery 2,1 или выше, в то время как Bootstrap требуют последнюю версию 1.1.x из JQuery (Bootstrap не поддерживает JQuery 2+ из-за JQuery 2 не поддерживает IE8).

После прочтения выше, вы должны также прочитать:

источник

2014-11-26 09:01:58

ЧАСТИЧНО РЕШИЛИ:
Не уверен, если это будет считаться хак. Кто-то, у кого больше знаний о jQuery и Angular, может/должен перезвонить, чтобы сказать вам, безопасно ли это.

нерешенности:
Это похоже на работу, пока страница загружается в первый раз. Он НЕ работает, если вы переходите от страницы и обратно (например, с помощью кнопки «Назад»). Я считаю, что это происходит из-за того, что Угловая инъекция тела и НЕ повторное отображение всей страницы ... или скриптов. Вероятно, есть что-то, что можно сделать в каждом шаблоне, который использует jQuery (как-то перезаписывать и т. Д.). Там, кажется, тонны вопросов/примеров, обсуждающих подобные проблемы с DOM, JQuery, и с помощью тайм-аута, чтобы исправить их:

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

Весь исправление с использованием ваших общих сценариев ресурсов, король-общий. 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); 
);

Они были перемещены в хвостовой части ваших скриптов .jade/scripts.html. Это было сделано первоначально как попытка отсрочить запуск этих методов, так что это может быть ненужным. Тем не менее, это часть того, как мы пришли к действующему шаблону.

источник

2014-11-27 13:09:03

Это плохая идея, потому что DOM не может быть отображен через 1 секунду после вызова таймаута –

Ваша проблема заключается в том, что 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(); 
         } 
        ] 
       } 
      }; 

     })

источник

2014-12-02 06:25:55

Точный! Угадайте, что тот же трюк выполняется в угловом бутстрапе –

Почему добавление AngularJS нарушает шаблон Bootstrap?

ответ

Смежные вопросы