Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

$attrs na attribute name ending with "start" #8044

Closed
kamilkp opened this issue Jul 2, 2014 · 2 comments
Closed

$attrs na attribute name ending with "start" #8044

kamilkp opened this issue Jul 2, 2014 · 2 comments

Comments

@kamilkp
Copy link
Contributor

kamilkp commented Jul 2, 2014

Hi,
I am writing a ui directive and I want to be able to notify the user at certain points. So if I place an attribute on-move it's value will be evaluated (angular expression) when a user moves his mouse for instance. And I also have on-start, but it turns out that in my $attrs object in the directive linking function I don't have a property onStart but on. I started digging into angular and I found that piece of code (in collectDirectives function):

var directiveNName = ngAttrName.replace(/(Start|End)$/, '');
if (ngAttrName === directiveNName + 'Start') {
    attrStartName = name;
    attrEndName = name.substr(0, name.length - 5) + 'end';
    name = name.substr(0, name.length - 6);
}

nName = directiveNormalize(name.toLowerCase());
attrsMap[nName] = name;
attrs[nName] = value = trim(attr.value);

So that makes virtually impossible to work with attribute names ending in either start or end and the $attrs object in pre-link/post-link/compile function in directives. Is that not a bug? I suppose this is to take care of e. g. ng-repeat-start/ng-repeat-end but shouldn't you just use the nName to pass it to the addDirecrive function but ngAttrName to write to the attrs object?

@caitp
Copy link
Contributor

caitp commented Jul 2, 2014

Dupe of #5370 --- there is a proposed fix, but it's never landed yet. I'll try to get it reviewed today

@kamilkp
Copy link
Contributor Author

kamilkp commented Jul 2, 2014

I have a hack for now:

$attrs.onStart = $attrs.$$element[0].attributes['on-start'] && $attrs.$$element[0].attributes['on-start'].value;

But it would be great if that was fixed. Thanks.

caitp added a commit that referenced this issue Jul 16, 2014
Directives which expect to make use of the multi-element grouping feature introduced in
1.1.6 (e46100f7) must now add the property multiElement
to their definition object, with a truthy value.

This enables the use of directive attributes ending with the words '-start' and '-end' for
single-element directives.

BREAKING CHANGE: Directives which previously depended on the implicit grouping between
directive-start and directive-end attributes must be refactored in order to see this same behaviour.

Before:

```
<div data-fancy-directive-start>{{start}}</div>
  <p>Grouped content</p>
<div data-fancy-directive-end>{{end}}</div>

.directive('fancyDirective', function() {
  return {
    link: angular.noop
  };
})
```

After:

```
<div data-fancy-directive-start>{{start}}</div>
  <p>Grouped content</p>
<div data-fancy-directive-end>{{end}}</div>

.directive('fancyDirective', function() {
  return {
    multiElement: true, // Explicitly mark as a multi-element directive.
    link: angular.noop
  };
})
```

Closes #5372
Closes #6574
Closes #5370
Closes #8044
Closes #7336
ckknight pushed a commit to ckknight/angular.js that referenced this issue Jul 16, 2014
Directives which expect to make use of the multi-element grouping feature introduced in
1.1.6 (angular@e46100f7) must now add the property multiElement
to their definition object, with a truthy value.

This enables the use of directive attributes ending with the words '-start' and '-end' for
single-element directives.

BREAKING CHANGE: Directives which previously depended on the implicit grouping between
directive-start and directive-end attributes must be refactored in order to see this same behaviour.

Before:

```
<div data-fancy-directive-start>{{start}}</div>
  <p>Grouped content</p>
<div data-fancy-directive-end>{{end}}</div>

.directive('fancyDirective', function() {
  return {
    link: angular.noop
  };
})
```

After:

```
<div data-fancy-directive-start>{{start}}</div>
  <p>Grouped content</p>
<div data-fancy-directive-end>{{end}}</div>

.directive('fancyDirective', function() {
  return {
    multiElement: true, // Explicitly mark as a multi-element directive.
    link: angular.noop
  };
})
```

Closes angular#5372
Closes angular#6574
Closes angular#5370
Closes angular#8044
Closes angular#7336
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants