Inserting HTML in an ng-embed shown as text instead of rendered HTML

[rishitank]

Hi,

I noticed after https://github.com/ritz078/ng-embed/pull/15 inputting HTML into a div that is using ng-embed does not render the HTML but instead it is shown as text. Is there any way to support inputting HTML using ng-embed? I currently have comments panel where a user can be mentioned, these mentions are detected and wrapped in anchor tags with the appropriate classes. Removing the sanitize code renders the HTML correctly because < and > are not encoded. Would it be possible to fix this by decoding the encoded HTML just before returning the input (after insertFontSmiley, insertEmoji etc has been called). Thanks.

Kind regards,

Rishi.

[ritz078]

I will have to make this optional. Will add this in the next release. Just a bit busy with other projects.

[rishitank]

Thank you, looking forward to this enhancement!

[robman87]

Since adding sanitizeHtml option ngEmbed can render html. I'm not sure it can render any html but simple tags like <h1>, <p>, <br> work if you set the option of sanitizeHtml to false.

[C0ZEN]

I am in struggle because I need to use tag and it doesn't works. It convert it like <a href=""..... Toggle sanitizeHtml change nothing. What can I do please ?

Update 1: I find out a work around myself, and it's quite simple in fact. I tell myself that the only problem here was the < and > which were broken. So I used replace to make them works again and $sce to read the content.

You can take a look at my directive.

/**
 * @ngdoc directive
 * @name cozen-compile
 * @scope
 * @restrict A
 * @replace false
 * @transclude false
 * @description
 *
 * @param {string}  cozenCompile                    > The text you want to convert
 * @param {boolean} cozenCompileRewriteHtml = false > Perform a replace of the text to avoid breaking HTML text
 *
 */
(function (angular) {
    'use strict';

    angular
        .module('cozenLib')
        .directive('cozenCompile', cozenCompile);

    cozenCompile.$inject = [
        '$compile',
        '$sce'
    ];

    function cozenCompile($compile, $sce) {
        return {
            link      : link,
            restrict  : 'A',
            replace   : false,
            transclude: false
        };

        function link(scope, element, attrs) {

            // Default values (attributes)
            scope.cozenCompileRewriteHtml = angular.isDefined(attrs.cozenCompileRewriteHtml) ? JSON.parse(attrs.cozenCompileRewriteHtml) : false;

            scope.$watch(
                function (scope) {

                    // watch the 'compile' expression for changes
                    return scope.$eval(attrs.cozenCompile);
                },
                function (value) {

                    // Rewrite the HTML
                    if (scope.cozenCompileRewriteHtml) {
                        value = $sce.valueOf(value);
                        value = value.replace(/&lt;/g, '<');
                        value = value.replace(/&gt;/g, '>');
                    }

                    // when the 'compile' expression changes
                    // assign it into the current DOM
                    element.html(value);

                    // compile the new DOM and link it to the current
                    // scope.
                    // NOTE: we only compile .childNodes so that
                    // we don't get into infinite loop compiling ourselves
                    $compile(element.contents())(scope);
                }
            );
        }
    }

})(window.angular);

And then use it like that.

<span cozen-compile="vm.myMessage"
      cozen-compile-rewrite-html="true">
</span>

Where vm.myMessage is a string where the filter embed was executed.

Update 2:

Filter example in the controller before sending the message to the view:

var embed = {
            fontSmiley      : true,
            sanitizeHtml    : false,
            emoji           : true,
            link            : false,
            linkTarget      : '_self'
}
vm.myMessage = $filter('embed')(vm.myMessage, embed);