Escaping HTML for a title attribute

2239 views
Skip to first unread message

Matt Raible

unread,
Mar 21, 2013, 11:13:37 AM3/21/13
to AngularJS
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

unread,
Mar 21, 2013, 7:04:20 PM3/21/13
to angular
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

unread,
Mar 22, 2013, 2:00:30 PM3/22/13
to ang...@googlegroups.com
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

unread,
Mar 22, 2013, 2:14:39 PM3/22/13
to angular
Yes, but you need to inject the $sanitize service: http://plnkr.co/edit/MDE1eNNLA8ETR9NPnmHu?p=preview

Matt Raible

unread,
Mar 22, 2013, 2:25:04 PM3/22/13
to ang...@googlegroups.com
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

unread,
Mar 22, 2013, 2:39:02 PM3/22/13
to angular
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

unread,
Mar 22, 2013, 2:39:56 PM3/22/13
to angular
But I should add that this will translate the escaped characters, but will completely omit the HTML tags!

Matt Raible

unread,
Mar 22, 2013, 2:48:38 PM3/22/13
to ang...@googlegroups.com
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
Reply all
Reply to author
Forward
0 new messages