CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Benjamin
Benjamin

Reputation: 1286

Angular directive nesting bizarrely broken when upgrading from 1.4.9 to 1.5.0

Apologies for the vague title; I have yet to figure out exactly what is breaking after the upgrade. Possibly the nesting of directives or template issues?

(example images & links to CodePens below)

Problem

I have a simple open source AngularJS library that generates a calendar. When using AngularJS 1.4.9 it works perfectly. But when I bump up to AngularJS 1.5.0 it breaks the layout in the most bizarre of ways.

No errors are thrown and all calendar days are generated in the DOM, however, all the days are output into a single week and all weeks are output into a single month (not even the first week or month either.. arghhh!).

Research

I have read the migration guide for 1.4 > 1.5 but didn't see anything that sounded related. I also read through the 1.5 changelog and the related rc changelogs; again nothing sounded related.

When I check the actual arrays of months/weeks/etc that are generated in JS everything looks great. If I remove the nested directives and simply have all the markup in a single template, the DOM output is correct (this is not a true solution since this would break certain functionality of the library).

Any ideas would be greatly appreciated.

Code & Demos

See the exact same code with the different versions of AngularJS (check Settings > JavaScript to see the linked libraries):

Again, the only difference is the version of AngularJS included.

The directive that is being used is simply:

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

enter image description here

Upvotes: 1

Views: 46

Answers (1)

charliebeckwith
charliebeckwith

Reputation: 1449

This isn't exactly 100% an answer, but that specific library relies heavily on the replace directive flag, which has since been deprecated see here. I downloaded the source and removed the replace flag on each directive, then with a few modifications to the css was able to achieve this. angular-json-calendar modification

The css changes were on .bc-calendar--days, .bc--calendar--days width : 50px; display: inline-flex;.

Upvotes: 2

Related Questions