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.

[pkozlowski-opensource]

So kind of "solved" it by adding our own version of the bind-unsafe directive. We are going to remove it while switching to 1.2 and advising people to use ngSanitize. For now I just want to unblock the situation as 1.2 is still in RC so I'm not sure if we won't see more changes...

[jimrollenhagen]

@pkozlowski-opensource mind if I send a pull request to use bind-html-unsafe in tooltip as well?

[jimrollenhagen]

Went ahead and sent #975. :)

[gdipkf1986]

so tired. i finding the whole internet, there is even no simple way to JUST output a short html snippet. Now i have to import a hug file just only for show a <br >,ridiculous.

[clouddueling]

For anyone who'd still like to use this directive:

Example:

<div ng-bind-html-unsafe="group.description"></div>

Directive:

directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){
    return {
        scope: {
            ngBindHtmlUnsafe: '=',
        },
        template: "<div ng-bind-html='trustedHtml'></div>",
        link: function($scope, iElm, iAttrs, controller) {
            $scope.updateView = function() {
                $scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe);
            }

            $scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) {
                $scope.updateView(newVal);
            });
        }
    };
}]);

http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu/19204391#19204391

[boroth]

Matthew.Lothian has probably made the best suggestion on how to update to using $sce instead of ng-bind-html-unsafe. See http://stackoverflow.com/questions/16722424/how-do-i-create-an-angularjs-ui-bootstrap-popover-with-html-content for details.

[mendelk]

Can anyone comment as to why this plunkr doesn't work?

Thank you.

[boroth]

What's not working for you? It seems to be working for me. I see a button that says "Left", which is your unsafe content, rendered in the plnkr

[mendelk]

@boroth The button shows, but clicking it doesn't trigger the popover for me. Does it trigger for you?

[boroth]

Ah, I didn't even see there was supposed to be a popover, but no it doesn't work. You might consider trying a different directive rather than ng-bind-html. I've had pretty good luck with ng-include.

[mendelk]

AFAIK, I can't use ng-include because the content is getting sent over as JSON dynamically.

Edit:
FWIW, the solution presented here seems to work, the problem being compilation.

[boroth]

Check out ($templateCache)[https://docs.angularjs.org/api/ng/service/$templateCache]. You can probably inject your templates into the $templateCache, and then reference them from ng-include.

[mendelk]

Thanks @boroth

That seems to work as seen here