AngularJS multi-element directive

Question

AngularJS supports multi-element directive with -start and -end postfix. The official documentation only mentions ng-repeat-start and ng-repeat-end. Do other built-in directives support this?

For example, this works fine:

<tbody>
  <tr ng-controller="myController">
    <td>{{firstName}}</td>
    <td>{{lastName}}</td>
  </tr>
</tbody>

Both {{firstName}} and {{lastName}} are replaced with their proper value.

But this only works partially:

<tbody>
  <tr ng-controller-start="myController">
    <td>{{firstName}}</td>
  </tr>
  <tr ng-controller-end>
    <td>{{lastName}}</td>
  </tr>
</tbody>

{{firstName}} is properly replaced. But {{lastName}} is empty. Since {{firstName}} works, seems ng-controller-start is recognized by AngularJS. Is it a bug, or I'm doing it wrong, that {{lastName}} is not working?

Update If ng-controller-start and ng-controller-end is not officially supported. How do I make ng-controller to span multiple elements? Can I use comment-style directive? If yes, how?

Answer 1

Whether or not a directive supports this is based on its directive definition and the multiElement property.

It doesn't seem like Angular's documentation says which built in directives are multi-element, but a Github search seems to reveal that it's only ngRepeat, ngSwitchWhen, ngSwitchDefault, ngIf, ngShow, and ngHide.

You can create your own directives with multiElement as well.