ng-bind-html-unsafe removed in 1.2 rc1

[ke-da]

Now that 1.2 rc1 is out, first issue I ran into is with tooltip-html-unsafe which I assume is using ng-bind-html-unsafe directive which is now removed. see angular/angular.js@dae6947
Is this already addressed in development branch?

[pkozlowski-opensource]

Yes, we are aware of this... This is a breaking change in AngularJS 1.2 and affects tooltips, popovers and typeahead. Unfortunately the new AngularJS-way of sanitizing HTML is not backward compatible either so switching to the new $sce service would mean that people must move to the 1.2RC1... which I think is too much to expect...

There are 2 options of moving forward here:

• just wait for 1.2 release and then move to $sce
• create a ng-bind-html-unsafe equivalent in this project

I guess we are just going to do a big jump and move to all the AngularJS 1.2 futures at one time ($animations etc.)

[garethdjames]

I have a work around that you can use until ui-bootstrap is upgraded to support 1.2 ($sce), this involves disabling $sce for your app. As per the documentation this is not advised for new apps but can be used for existing apps until issues like this are resolved.

See section "How can I disable SCE completely" at http://docs.angularjs.org/api/ng.$sce

then in your app, supply a new template for tooltip-html-unsafe changing ng-bind-html-unsafe to ng-bind-html

or if like me you are using bower to manage your build, in your app add the template to the cache on load of your app with

$templateCache.put("template/tooltip/tooltip-html-unsafe-popup.html",
            "<div class=\"tooltip {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
                "  <div class=\"tooltip-arrow\"></div>\n" +
                "  <div class=\"tooltip-inner\" ng-bind-html=\"content\"></div>\n" +
                "</div>\n" +
                "");

[garethdjames]

Obviously there are implications for this workaround for ng-bind-html as any html will no longer be "sanitised" (now with $sce). Take care using this only where you understand the implications of XSS.

[maximilianeberl]

OMG!
You just removed a central feature of AngularJS !!!
Is this a kiddie playground ?

If You want enterprise customers to use Your technology
You should keep up features until the new version works.
Remember the Chaos between Spring 3.0 and Hibernate 4.0 ?

That's exactly how to chase away enterprise users
and developers who work for them!!

[hallister]

@maximilianeberl Woah buddy, slow down! First of all no one here removed anything. This isn't the AngularJS project, this project is built on top of AngularJS.

That said, ng-bind-html-unsafe was replaced with $sce, which gives developers significantly more control on how/what content is allowed on ng-bind-html. The rough equivalent to ng-bind-html is:

// HTML
<div ng-bind="noSanitize()">

// Controller
$content = '<p>test</p>';
$noSanitize() = $sce.trustAsHtml($content);

I hardly consider the addition of a couple of lines of code is hardly worth blowing up over. Especially given the degree of control $sce allows.

[gtramontina]

Instead of disabling the whole thing, you could simply add the ngSanitize module to your app, and then provide your input with the attribute typeahead:template:url pointing to your template, which replaces ng:bind:html:unsafe with ng:bind:html, as @garethdjames pointed out.

In my case it worked just fine, as I needed a custom result entry template anyway.

angular.module('my.app', ['ngSanitize']);
// ...

<input type="text" typeahead="match as match.name for match in search($viewValue)" typeahead:template:url="/templates/result.entry.html">

<!-- /templates/result.entry.html -->
<a tabindex="-1" ng-bind-html="match.label | typeaheadHighlight:query"></a>

[petebacondarwin]

The safest and best way to move forward, is as @gtramontina says. We should change angular-ui bootstrap to have a dependency on ngSanitize (if you want to use things that bind HTML, such as typeahead). Then we change ng-bind-html-unsafe to be ng-bind-html throughout.
In pre-1.2 versions of AngularJS, the bind-html will simply do nothing if ngSanitize is not provided. In 1.2+ versions it will either throw an error if ngSanitize is not provided.

[pkozlowski-opensource]

@petebacondarwin yep, this sounds like a reasonable approach. But I've got an impression that we had this discussion already and decided not to include ngSanitize for now, if I recall correctly.

What I was planning to do is to create an equivalent of ng-bind-html-unsafe just to unblock the situation. AFAIK this is the only thing that breaks with 1.2RC1.