Переписывать сценарии «Углового пути»?

Question

Переписывать сценарии «Углового пути»?

0

Хорошо, у меня есть довольно простой сайт, над которым я работаю, теперь я модифицирую использование стека MEAN, и поэтому я начинаю работу с Angular. Я использую приложение Scotch.io MEAN для начинающих в качестве основы для начала работы. До сих пор это было довольно просто, у меня есть ключевые компоненты в шаблонах и добавлены они с помощью ng-include.

HTML

    <title>First Angular Page</title>

    <!-- CSS -->
      <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> <!-- Font Awesome -->
      <link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'> <!-- Google Fonts -->
    <link rel="stylesheet" href="css/mainStyles.css"> <!-- Stephie styles -->

    <!-- JS -->
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/controllers/NerdCtrl.js"></script>
    <script src="js/services/NerdService.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">

<!-- NAVAGATION -->
<div ng-include='"templates/navagation.html"'></div> 

<div id="site-canvas">
    <!-- HEADER -->
<div ng-include='"templates/header.html"'></div>
<div id="page-content">



    <!-- ANGULAR DYNAMIC CONTENT / UNIQUE PAGE FRAGMENT -->
    <div ng-view></div>
</div> <!-- #page-content -->

<!-- FOOTER -->
<div ng-include='"templates/footer.html"'></div>

</div><!-- #site-canvas -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/menu.js"></script>

</body>
</html>

Но теперь у меня проблемы, файл menu.js не работает. Он полностью состоит из методов add/removeClass с использованием jQuery.
Здесь старый код Pen на сайте, над которым я работаю в основном HTML, чтобы показать, как он должен работать. http://codepen.io/StuffieStephie/pen/BNqJVX

  function toggleNav() {
if ($('#drawer').hasClass('show-nav')) {
        $('#drawer').removeClass('show-nav');
        $('#nav-icon').removeClass('open');
        $("nav li.gotsMenus").removeClass("showSub");
} else {
        $('#drawer').addClass('show-nav');
        $('#nav-icon').addClass('open');
        $("nav li.gotsMenus").removeClass("showSub");
}
}
  $('#closeButton, #site-canvas, nav li li').click(function() {
      $('#drawer').removeClass('show-nav');
      $('#nav-icon').removeClass('open');
      $("nav li.gotsMenus").removeClass("showSub");
});

Но это не работает с моими угловыми шаблонами. (Или, по крайней мере, функции щелчка и наведения не работают. Функция прокрутки, которая автоматически скрывает заголовок, все еще работает загадочно...? Так что это любопытная работа)

Итак... с чего начать? Извините, если это очень глупый вопрос, но я новичок в Angular, и я пару часов вращаю свои колеса. Я помещаю это в директиву или контроллер или модуль или что? Должен ли я переписать это в vanilla js? И даже если бы я это сделал, у меня есть другие зависимости jQuery (у меня есть галерея изображений, основанная на Tumblr JSON API, которая, помимо прочего, использует jQuery-зависимую лайтбокс).

Если кто-то может просто указать мне в правильном направлении, я был бы так благодарен;

StephanieQ 17 авг. 2015, в 01:16

Источник

0

Весь код манипулирования DOM должен быть помещен в директиву
charlietfl 16 авг. 2015, в 22:56

Теги:

javascript

jquery

angularjs

1 ответ

Ещё вопросы

Весь код манипулирования DOM должен быть помещен в директиву

beautifulcoder · Answer 1 · 2015-08-16T22-12-00.000Z

Звучит как условие гонки, когда скрипт выполняется, в DOM не может быть #menuHeader. Возможно, вам придется добавить код в обратный вызов load с помощью делегата. Так вот:

$("#menuHeader").on('load', function () {
    // Put menu.js code here
});

Я бы поставил точку останова и выяснил, что на самом деле в DOM, когда это выполняется. И в основном выясните, что нужно, чтобы сначала загрузить DOM, а затем запустить скрипт.

нет никакого события загрузки для элементов контента, и не найти селектора - едва ли условие гонки, это просто тихо терпит неудачу
Хм, #menuHeader определенно загружен, функция onscroll, которая переключает скрытые / показанные классы с помощью jQuery, все еще работает над этим и этим одним. Я переместил содержимое menu.js в свой «NerdController» (получил название от Scotch lol) с теми же результатами ... Работает только функция прокрутки.