problems with ngsanitize and (click) attribute

[david-gang]

Hi,

I don't know if this is a problem with angular sanitize or ng-forward but it does not recognize the (click) attribute.

I renamed ng-click="" to (click)=

I get

Error: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.
at Error (native)
at forEach.attr
at Object.JQLite.(anonymous function) [as attr]
at Object.$$sanitizeUriProvider.$get.Attributes.$set
at http://localhost:8000/primo-explore/lib/bundle.js:52302:15
at forEach
at mergeTemplateAttributes
at applyDirectivesToNode
at compileNodes
at compileNodes

I am using angular-sanitize 1.4.7

Please let me know if i should continue this here or open a defect to angular-sanitize.

Thanks,
David

[timkindberg]

@petebacondarwin this bug seems a bit crazy. Can you send this over to a sanitize expert and see if our special attributes seem like they might cause a problem?

[petebacondarwin]

I will take a look

[petebacondarwin]

@david-gang - can you provide some more information?
Ideally could you create, a live code example, perhaps on Plunker, that demonstrates this issue?
Also if you could indicate the browser as well?
Cheers
Pete

[david-gang]

Hi @petebacondarwin
I managed to setup a plunkr.
I can just reproduce it with md-button of angular-material, not with the native html elements

http://plnkr.co/edit/ieSrnKOd5i5OUP3NAUO9?p=preview

Browser is: Chrome: Version 46.0.2490.80 m
Thanks

[petebacondarwin]

OK, so this is a pain. It seems that we cannot use element.setAttribute() with attribute names that start with (. See http://plnkr.co/edit/3aaZg6ADJ9DDMUZqK3kE?p=preview

[petebacondarwin]

Let's see what they do in Angular 2 ...

[petebacondarwin]

See angular/angular#133 and https://www.w3.org/Bugs/Public/show_bug.cgi?id=27228

[david-gang]

Hi @petebacondarwin . I tried to go over the whole thread. Do you see there a bottom line, aside that this issue is closed? :-) .
Additionally we have to think that this library is aimed for using future syntax in the browsers of today, so if in the browsers of today it doesn't work, may it be safer to stay with the ng-click syntax instead of (click) ?

[petebacondarwin]

The bottom line, regarding browsers is that they will parse the syntax as HTML but not allow you to programmatically write to it.

I believe that Angular 2 avoids ever writing to DOM attributes. If you remember, in Angular 2 the () and [] syntax refers to properties on the underlying DOM object (or in the case of components the component instance). This means that although they use the syntax in the HTML they never need to call setAttribute with an "invalid" attribute name.

I am not sure how we can get around this in Angular 1 and ng-forward.

There is, though, alternative syntax in Angular 2, which uses bind-... and so on instead of this "invalid" shorthand. We may have to go with that instead, if we can't find a solution.

[MikeRyanDev]

We could feasibly generate two sets of directives for events, one supporting on-${event} and another supporting (${event}), however with properties it would be best if we picked just one syntax. Thoughts @timkindberg ?

[david-gang]

Hello @MikeRyan52
Would it be possible that we will use (click) attributes in the template but behind the scenes it will be converted to bind-click ?

[timkindberg]

@MikeRyan52 I'd kind of thought of doing that, but I remember you preferring to choose one. I do wonder sometimes what level of template parsing we might be able to do. A quick regex over the template string might not hurt, converting bind-* to [*]. I'm trying to think of the dangers in doing that.

[timkindberg]

ugh... I keep avoiding this issue. @petebacondarwin so give it to me straight. Do we have to ditch the special bind syntax?