Escaping HTML for a title attribute

[Matt Raible]

Hey all,

I have the following HTML that works fine for rending my widget's
titles:

<div class="title" ng-bind-html="widget.title"></div>

However, I've found that some titles are long and I've hidden them
using "overflow: hidden" in CSS. To allow users to still see the full
value, I'd like to put the full title in a "title" attribute. How
would I do this and still get HTML unescaping?

Thanks,

Matt

[Josh David Miller]

Hello!

I would create a simple directive and set the value in an "attrs.$observe" block. If invoked like so: <div class="title" widget-title="{{widget.title}}"></div>. In your directive link fn:

attrs.$observe( 'widgetTitle', function ( title ) {

  var html = $sanitize( title );

  element.attr( 'title', html );

  element.html( html );

});

Josh

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

[Matt Raible]

Do you mean something like this:

<div class="title" ng-bind-html="widget.title" html-title="{{widget.title}}"></div>

    .directive('htmlTitle', function() {

        return {

            restrict: 'A',

            link: function(scope, element, attrs) {

                attrs.$observe( 'htmlTitle', function ( title ) {

                  var html = $sanitize( title );

                  element.attr( 'title', html );

                  element.html( html );

                });

            }

        }

    })

I tried this, but no "title" attribute is set. 

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/hG-T1bsmlnk/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Josh David Miller]

Yes, but you need to inject the $sanitize service: http://plnkr.co/edit/MDE1eNNLA8ETR9NPnmHu?p=preview

[Matt Raible]

OK, that gets me a bit further. I'm staring with the following string:

My View &quot;My Tasks&quot;

After this directive is processed, I end up with:

My View &#34;My Tasks&#34;

However, if I try your plnkr, replacing <b> with &quot; correctly processes it. Any idea why there's an invalid substitution?

[Josh David Miller]

This is a browser limitation. Setting attributes programmatically will only set a text value. Here's a hacky work-around: http://plnkr.co/edit/E4nkfXMTQc4NtivxFYg0?p=preview

[Josh David Miller]

But I should add that this will translate the escaped characters, but will completely omit the HTML tags!

[Matt Raible]

This worked and I don't really care about HTML tags b/c I wouldn't want those showing up in a title anyway. With your work-around, this:

My View &quot;My Tasks&quot; and <b>bold</b>

Gets translated to:

My View "My Tasks" and bold - which is what I wanted. 

Thanks!

Matt