Multilevel AngularJS Directive

Question

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

For example, this works great:

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

Both {{firstName}} and {{lastName}} are replaced with their own 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}} properly replaced. But {{lastName}} empty. Since {{firstName}} works, it seems that ng-controller-start recognized by AngularJS. Is this a mistake, or am I doing it wrong that {{lastName}} not working?

Update If ng-controller-start and ng-controller-end are not officially supported. How to make ng-controller to place multiple items? Can I use a comment style directive? If so, how?

Answer 1

Regardless of whether it supports the directive, it is determined by the directive and multiElement .

The Angular documentation does not seem to say that the built-in directives are multi-element, but a Github search seems to show that it is only ngRepeat , ngSwitchWhen , ngSwitchDefault , ngIf , ngShow and ngHide .

You can also create your own directives using multiElement .

Answer 2

In Angular 1.2

With Angular 1.2, support for multi-element directives has been introduced. It seems that the specific use case that they had in mind was ngRepeat, as far as I know, it was not used for use with any other built-in directives. However, with ngRepeat, he solved a very specific problem, for example, how to repeat several rows of a table per element.

In 1.2, the $compile service will detect any directive that will be marked with -start , and suppose that it is one of the two attributes of a directive with several elements ( source ). This leads to an undesirable side effect that you cannot call your something-start directive, since the $compile service will get confused when it does not find a multi-element copy.

This results in the error: Error: [$compile:uterdir] Unterminated attribute, found 'something-start' but no matching 'something-end' found.

The fact that the $compile service is immutable when considering directives as multi-element is that you can use ng-controller-start and ng-controller-end in Angular 1.2. However, the ngController directive is not designed to work with multiple elements, and therefore it does not work properly. It will act on the first element in the range and ignore the rest - just as you observed.

In Angular 1.3

Angular 1.3 fixes the above problem by requiring that any multi-element directives be explicitly defined as such using the new multiElement: true property in the directive definition object. See docs about it

This means that ng-controller-start do nothing in 1.3, as this will cause the compiler to look for a directive named ngControllerStart that does not exist. Therefore, the directive attribute will simply be ignored.

As another answer indicates, now you can search the angular.js GitHub repository for "multiElement" to see specific core directives that support this feature.