Confusing formatting of animation events

[fredsa]

See https://docs.angularjs.org/api/ng/directive/ngIf#animations

The source contains the following text:

 * @animations
 * enter - happens just after the `ngIf` contents change and a new DOM element is created and injected into the `ngIf` container
 * leave - happens just before the `ngIf` contents are removed from the DOM

However, enter and leave are rendered all strung together (ignoring new lines):

enter - happens just after the ngIf contents change and a new DOM element is created and injected into the ngIf container leave - happens just before the ngIf contents are removed from the DOM

Instead I'd expect enter and leave events to be shown on two separate lines:

enter - happens just after the ngIf contents change and a new DOM element is created and injected into the ngIf container
leave - happens just before the ngIf contents are removed from the DOM

or better yet, use back ticks around the event names (enter and leave) for clarity:

enter - happens just after the ngIf contents change and a new DOM element is created and injected into the ngIf container
leave - happens just before the ngIf contents are removed from the DOM

[fredsa]

Note that the issue isn't just with ngIf, but also any of the other animation events
e.g. ngShow (https://docs.angularjs.org/api/ng/directive/ngShow#animations) has:

addClass: .ng-hide - happens after the ngShow expression evaluates to a truthy value and the just before contents are set to visible removeClass: .ng-hide - happens after the ngShow expression evaluates to a non truthy value and just before the contents are set to hidden

rather than:

addClass: .ng-hide - happens after the ngShow expression evaluates to a truthy value and the just before contents are set to visible
removeClass: .ng-hide - happens after the ngShow expression evaluates to a non truthy value and just before the contents are set to hidden

[Narretz]

I think this needs to be fixed in the dgeni template for directives.