Skip to content

Not possible to have html ticks values when showTicksValues is true #277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
saus opened this issue Feb 23, 2016 · 12 comments
Closed

Not possible to have html ticks values when showTicksValues is true #277

saus opened this issue Feb 23, 2016 · 12 comments

Comments

@saus
Copy link

saus commented Feb 23, 2016

Steps to reproduce

  1. Configure slider with showTicksValues: true and translate method that returns html.

Could be fixed by using ng-bind-html in rzSliderTpl.html, but that will probably add dependency on ngSanitize (?)

Demo: http://jsfiddle.net/9xdgjjb7/1/

Expected behaviour

Show ticks values without html escaped

Actual behaviour

Html tags are escaped

@ValentinH
Copy link
Member

Hmmm having a dependency on ngSanitize is not really good to me since I don't want to add a requirement that will be useless for 99% of the slider users.

Actually, when implementing #251, I didn't think about this issue but the string passed to html() should also be sanitized to avoid exploits.

I need to think more about it...

@saus
Copy link
Author

saus commented Mar 10, 2016

I agree that sanitizing is generally a good idea.

For my case, there actually is an easy fix. I copied the default template, did my fix mentioned above, and used rz-slider-tpl-url to use my custom template.

Not optimal, but definitely working.

@lobo87
Copy link

lobo87 commented Mar 17, 2016

well, you could use $sce.trustAsHtml(html) and ng-bind-html in the template? so no need to use ngSanitize, right?

or use a filter like
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

@ValentinH
Copy link
Member

Indeed, but in order to use $sce, angular-sanitize.js has to be included and I don't want to force all the users to include it when they don't use html ticks.

@boboldehampsink
Copy link

Not being able to use html ticks is a real buzzkill for me

@ValentinH
Copy link
Member

I understand but I couldn't find a solution so far. If you have something to suggest, I would be grateful! ;)

@boboldehampsink
Copy link

I used @saus's suggestion for now. I override the template and use ng-bind-html with ngSantize to get the desired result.

@ValentinH
Copy link
Member

Yes this is a good workaround, I should probably document the template overriding so other users can use it.

@boboldehampsink
Copy link

Yeah, I had to go in the source to find that option. Documenting would be a good idea, maybe even add a example with ng-bind-html

@lobo87
Copy link

lobo87 commented Mar 23, 2016

well seems like the only option, if you dont want any dependencies. but to be honest, using ng-bind-html and custom template will do. However, as @boboldehampsink stated, a small hint in the documentation, would be good.

@ValentinH
Copy link
Member

Documentation added about rz-slider-tpl-url. Still need to add an example.

@ValentinH
Copy link
Member

Demo added in http://angular-slider.github.io/angularjs-slider. Check the "Slider with custom template to use HTML formatting for ticks" part. ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants