feat($compile): support directive virtual groups #2783

Merged
merged 1 commit into from May 29, 2013

Conversation

Projects
None yet
@mhevery
Member

mhevery commented May 24, 2013

By appending X-start and X-end to a directive it is now possible
to have the directive act on a group of elements.

It is now possible to iterate over multiple elements like so:

<table>
  <tr ng-repeat-start="item in list">I get repeated</tr>
  <tr ng-repeat-end>I also get repeated</tr>
</table>
@petebacondarwin

View changes

src/ng/compile.js
@@ -573,6 +587,47 @@ function $CompileProvider($provide) {
return directives;
}
+ /**
+ * Given a node witch a X-start it collects all of the siblings until it find X-end.

This comment has been minimized.

@petebacondarwin

petebacondarwin May 24, 2013

Member

Typo: "witch a" -> "with an" or "which has an"

@petebacondarwin

petebacondarwin May 24, 2013

Member

Typo: "witch a" -> "with an" or "which has an"

This comment has been minimized.

@mhevery

mhevery May 25, 2013

Member

fixed

@mhevery

mhevery May 25, 2013

Member

fixed

@lrlopez

This comment has been minimized.

Show comment
Hide comment
@lrlopez

lrlopez May 25, 2013

Contributor

Cool! Just one comment: It may be necessary to state that this introduces a breaking change as any previous directive that ended with start won't work now without changes.

Contributor

lrlopez commented May 25, 2013

Cool! Just one comment: It may be necessary to state that this introduces a breaking change as any previous directive that ended with start won't work now without changes.

feat($compile): support multi-element directive
By appending  directive-start and directive-end to a
directive it is now possible to have the directive
act on a group of elements.

It is now possible to iterate over multiple elements like so:

<table>
  <tr ng-repeat-start="item in list">I get repeated</tr>
  <tr ng-repeat-end>I also get repeated</tr>
</table>

@mhevery mhevery merged commit e46100f into angular:master May 29, 2013

1 check was pending

default The Travis CI build is in progress
Details
@gevgeny

This comment has been minimized.

Show comment
Hide comment
@gevgeny

gevgeny Jun 2, 2013

I have tried to run this example but got the error:
TypeError: Object #<Text> has no method 'hasAttribute' at groupScan (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4730:20) at applyDirectivesToNode (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4796:26) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4563:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compile (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4505:29) at resumeBootstrapInternal (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:1009:11)

See details here: http://stackoverflow.com/questions/10457833/how-would-i-render-a-dynamic-definition-list-using-angular/16808545#16808545

gevgeny commented Jun 2, 2013

I have tried to run this example but got the error:
TypeError: Object #<Text> has no method 'hasAttribute' at groupScan (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4730:20) at applyDirectivesToNode (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4796:26) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4563:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compileNodes (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4568:15) at compile (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:4505:29) at resumeBootstrapInternal (http://localhost:8889/examples/market-stats3/js/dependencies/angular.1.1.6-b6a0777.js:1009:11)

See details here: http://stackoverflow.com/questions/10457833/how-would-i-render-a-dynamic-definition-list-using-angular/16808545#16808545

@aleksabl

This comment has been minimized.

Show comment
Hide comment
@aleksabl

aleksabl Jun 3, 2013

I've made a fix for this inn pull request #2859 .

aleksabl commented Jun 3, 2013

I've made a fix for this inn pull request #2859 .

@VonD

This comment has been minimized.

Show comment
Hide comment
@VonD

VonD Jun 10, 2013

hi,
thanks for this great feature. Do you have an idea when this will be in the stable branch ?
thanks a lot.

VonD commented on e46100f Jun 10, 2013

hi,
thanks for this great feature. Do you have an idea when this will be in the stable branch ?
thanks a lot.

This comment has been minimized.

Show comment
Hide comment
@grettke

grettke Jun 15, 2013

That is super. We'll be watching for this on the mainline, too 👍 .

That is super. We'll be watching for this on the mainline, too 👍 .

This comment has been minimized.

Show comment
Hide comment
@markrendle

markrendle Jul 8, 2013

Nice change, I've got a couple of use cases for this.

Nice change, I've got a couple of use cases for this.

This comment has been minimized.

Show comment
Hide comment
@Leeiio

Leeiio Jul 23, 2013

Can not wait to use it!

Can not wait to use it!

This comment has been minimized.

Show comment
Hide comment
@fizx

fizx Aug 13, 2013

AFICT, this doesn't help a case where you want nested repeats of different cardinality, e.g. in bastardized regex: (h4 p_)_.

fizx replied Aug 13, 2013

AFICT, this doesn't help a case where you want nested repeats of different cardinality, e.g. in bastardized regex: (h4 p_)_.

This comment has been minimized.

Show comment
Hide comment
@burkeholland

burkeholland Feb 17, 2014

This is neato! One thought though - it is encroaching on what attributes you can and can't use - even when they are custom attributes.

kendo-labs/angular-kendo#203 (comment)

Is there a way to override this behavior (turn it on/off), or are we now going to have to change any start end named attributes?

This is neato! One thought though - it is encroaching on what attributes you can and can't use - even when they are custom attributes.

kendo-labs/angular-kendo#203 (comment)

Is there a way to override this behavior (turn it on/off), or are we now going to have to change any start end named attributes?

This comment has been minimized.

Show comment
Hide comment
@caitp

caitp Feb 17, 2014

Contributor

@burkeholland There's a PR to provide a bit more control for this, #5372 --- for the time being, unfortunately you are stuck with it =(

Contributor

caitp replied Feb 17, 2014

@burkeholland There's a PR to provide a bit more control for this, #5372 --- for the time being, unfortunately you are stuck with it =(

@cdmckay

This comment has been minimized.

Show comment
Hide comment
@cdmckay

cdmckay Jun 11, 2013

Wouldn't it make more sense to have a ngGroup directive that self-destructs after being added?

<table>
  <ng-group ng-repeat="item in list">
    <tr>I get repeated</tr>
    <tr>I also get repeated</tr>  
  </ng-group>
</table>

When ng-group renders, it always removes itself and adds it's children to its parent element.

cdmckay commented Jun 11, 2013

Wouldn't it make more sense to have a ngGroup directive that self-destructs after being added?

<table>
  <ng-group ng-repeat="item in list">
    <tr>I get repeated</tr>
    <tr>I also get repeated</tr>  
  </ng-group>
</table>

When ng-group renders, it always removes itself and adds it's children to its parent element.

rodyhaddad added a commit to rodyhaddad/angular.js that referenced this pull request Aug 6, 2013

feat($compile): support multi-elements in all declaration styles
I've built on the work of #2783 to make multi-elements possible in all
directive decralation styles.
Basically #2783 was limited to directives declared via attributes.
With this commit, appending X-start and X-end would work
in Comments, Attributes, ClassNames and ElementNames
```html
<table>
  <!-- directive: ng-repeat-start item in list -->
    <tr>If ngRepeat's 'restrict' get changed to include 'M'</tr>
    <tr>I get repeated</tr>
  <!-- ng-repeat-end -->
</table>
```

rodyhaddad added a commit to rodyhaddad/angular.js that referenced this pull request Aug 14, 2013

feat($compile): support multi-elements in all declaration styles
I've built on the work of #2783 to make multi-elements possible in all
directive decralation styles.
Basically #2783 was limited to directives declared via attributes.
With this commit, appending X-start and X-end would work
in Comments, Attributes, ClassNames and ElementNames
```html
<table>
  <!-- directive: ng-repeat-start item in list -->
    <tr>If ngRepeat's 'restrict' get changed to include 'M'</tr>
    <tr>I get repeated</tr>
  <!-- ng-repeat-end -->
</table>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment