Блог

Главная - Вопросы по программированию - Вложенность директивы Angular странным образом нарушена при обновлении с 1.4.9 до 1.5.0

Вложенность директивы Angular странным образом нарушена при обновлении с 1.4.9 до 1.5.0

#javascript #angularjs #angularjs-directive

#javascript #angularjs #angularjs-директива

Вопрос:

Прошу прощения за расплывчатое название; Мне еще предстоит выяснить, что именно ломается после обновления. Возможно, проблемы с вложенностью директив или шаблонов?

(примеры изображений и ссылки на CodePens ниже)

Проблема

У меня есть простая библиотека AngularJS с открытым исходным кодом, которая генерирует календарь. При использовании AngularJS 1.4.9 он работает отлично. Но когда я перехожу к AngularJS 1.5.0, это нарушает макет самым причудливым образом.

Ошибок не возникает, и все календарные дни генерируются в DOM, однако все дни выводятся в одну неделю, а все недели выводятся в один месяц (даже не в первую неделю или месяц .. аргххх!).

Исследования

Я прочитал руководство по миграции для 1.4> 1.5, но не увидел ничего похожего. Я также прочитал список изменений 1.5 и связанные с ним списки изменений rc; опять ничего не звучало связанным.

Когда я проверяю фактические массивы месяцев / недель / etc, которые генерируются в JS, все выглядит великолепно. Если я удалю вложенные директивы и просто соберу всю разметку в одном шаблоне, вывод DOM будет правильным (это неверное решение, поскольку это нарушит определенные функциональные возможности библиотеки).

Любые идеи будут с благодарностью приняты.

Код и демонстрации

Посмотрите точно такой же код с разными версиями AngularJS (проверьте Настройки> JavaScript, чтобы увидеть связанные библиотеки):

Опять же, единственным отличием является включенная версия AngularJS.

Используемая директива просто:


<!-- This should generate a 30 day calendar starting with the current day -->
<bc-calendar class="bc-calendar--days"></bc-calendar>

введите описание изображения здесь

Комментарии:

1. похоже, это можно исправить с flex помощью настроек css. Странно, почему это могло бы сломаться, если бы шаблоны и css были одинаковыми

2. Я не верю, что CSS может это исправить. Если вы посмотрите на сгенерированный DOM в сломанном примере, вы увидите, что фактическая вложенность DOM нарушена. В течение первого месяца нет недель (их должно быть 6). Затем несколько пустых недель во втором месяце, в то время как все дни находятся внутри второй недели. Так странно..

3. хорошо .. признаю, что я не проводил тщательного сравнения… только действительно посмотрел на сломанный

4. Не беспокойтесь.. На данный момент я беру любую идею 🙂

Ответ №1:

Это не совсем 100% ответ, но эта конкретная библиотека в значительной степени зависит replace от флага директивы, который с тех пор устарел, см. Здесь . Я загрузил исходный код и удалил флаг замены в каждой директиве, а затем с помощью нескольких модификаций css смог добиться этого. модификация angular-json-calendar

Изменения css были включены .bc-calendar--days, .bc--calendar--days width : 50px; display: inline-flex; .

Комментарии:

1. Это очень интересно.. Я знал, что флаг устарел, но, согласно документам (и этому коммиту), он фактически не будет удален до версии 2.0, для которой эта библиотека в любом случае не создана. Я обязательно немного разберусь в этом.

2. @Benjamin уже давно известно, что это вызывает непредсказуемые проблемы

3. Верно. Думаю, мне просто любопытно, какие изменения были внесены в 1.5.0, которые действительно нарушили его.

4. Удаление флага ‘replace’ фактически решило эту проблему, как отметил @charliebeckwith. Все еще очень любопытно, что было нарушено в AngularJS v1.5.0, поскольку это не должно было быть критическим выпуском.

5. Я тоже. Я столкнулся с аналогичной проблемой при переходе с 1.4-> 1.5, поэтому просто подумал, не было ли это причиной и здесь.