HTML Binding for Labels

[markwpearce]

I added the ability to use "ng-bind-html" for the labels on the toggle switch. In order to do this, it now requires ngSanitize.

To make the switch use html binding, simply add a "html" attribute to the switch:

Puppies or not?
<toggle-switch
    model="switchStatus"
    html="true"
    knob-label="<strong>##</strong>"
    on-label="<em>Puppies!</em>"
    off-label="<del>Puppies</del>">
<toggle-switch>

[markwpearce]

Here's the example code you can add to the gh-pages:

<h3> <a name="html-bind" class="anchor" href="#html-bind"><span class="octicon octicon-link"></span></a>HTML Bind</h3>

<div class="highlight highlight-html"><pre><span class="nt">&lt;toggle-switch</span>
    <span class="na">model=</span><span class="s">"switchStatus"</span>
    <span class="na">html=</span><span class="s">"true"</span>
    <span class="na">knob-label=</span><span class="s">"&lt;strong&gt;##&lt;/strong&gt;"</span>
    <span class="na">on-label=</span><span class="s">"&lt;em&gt;Puppies!&lt;/em&gt;"</span>
    <span class="na">off-label=</span><span class="s">"&lt;del&gt;Puppies&lt;/del&gt;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;toggle-switch&gt;</span>
</pre></div>

<toggle-switch model="switchState" html="true" knob-label="<strong>##</strong>" on-label="<em>Puppies!</em>" off-label="<del>Puppies</del>"></toggle-switch>

[cgarvis]

Does ngSanitize have a angular version requirement?

[markwpearce]

It's a standard angular module.

https://docs.angularjs.org/api/ngSanitize

I'm not sure what Angular version it was introduced in.

On May 15, 2014, at 5:23 PM, Christopher Garvis [email protected] wrote:

Does ngSanitize have a angular version requirement?

— Reply to this email directly or view it on GitHub.

[cgarvis]

I see docs for it in 1.0.8. Not much there but looks like it should be good.

[markwpearce]

Did you want me to update the branch with the dependency set to version 1.0.8?

[markwpearce]

I don't mean to bother, but when do you think this will be pulled in?

[cgarvis]

Could this be made simpler with two different templates?

On Mon, May 26, 2014 at 10:51 AM, Mark Pearce [email protected] wrote:

I don't mean to bother, but do you think this will be pulled in?

Reply to this email directly or view it on GitHub: https://github.com/cgarvis/angular-toggle-switch/pull/27#issuecomment-44195574

[markwpearce]

The issue I ran into is that the existing tests expect the new (generated by the directive) HTML to be child nodes of the actual node. That's why theres a template and an innerTemplate in the link function.

Also, this makes it so we don't duplicate any code around the class names or ng-class calls.

[jmaynier]

Any update on this pull request ?

[markwpearce]

I actually switched to using https://github.com/JumpLink/angular-toggle-switch

It has html binding for labels an a more bootstrap 3-like styling, too

On Sep 30, 2014, at 6:40 AM, jmaynier [email protected] wrote:

Any update on this pull request ?

— Reply to this email directly or view it on GitHub.

[jmaynier]

Thanks @markwpearce, I will try it.