Enhancement: Support for HTML in message content

[bsweeney]

trafficstars

Occasionally I'd like to use HTML-formatted content (e.g. a spinner icon or a mult-line message) for the blockui message. Right now that's not possible without modifying both the template and directive code. I'd like to see the code updated to support HTML.

If I get a chance I'll include a PR with suggested changes (mainly using $sce.trustAsHtml and ng-bind-html)

[gochinj]

I made it work by only modifying the template in my application during the AngularJS "config" phase. All that is needed is to remove the {{state.message}}, and add ng-bind-html="state.message" to the inner most div tag.

    (function(angular, undefined){
        var blockUIConfigProv;
        angular.module("app",['blockUI'])
            .config(['blockUIConfig', function(blockUIConfig){
                blockUIConfig.template = "<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\" ng-bind-html=\"state.message\"></div></div>";
            }])

            .controller("main", ['$sce','$timeout','blockUI',function($sce, $timeout, blockUI){

                blockUI.start($sce.trustAsHtml("<div class='fcfn-vd-logo-large'></div>") )
                $timeout(blockUI.stop, 6000);
            }])
        ;
    })(angular);

[bsweeney]

@gochinj nice, I'll definitely be using that bit of code since I, unfortunately, hadn't had a chance to do this. I didn't expect it to require too much code.

[gochinj]

No problem. After I posted the code above, I of course began to run into issues. The first of which was that angular issues its $digest and you get an error about unsafe HTML detected. I found that it was caused by state.message being an empty string during the bootstrap phase. The simple answer was too add the following code. I chose to use the angular.run event, but your controller works well also.

Basically I am call start and stop back to back to the message never shows. (Unless you set the delay property to 0.)

angular.module("foo",[])
    .run(['$sce','blockUI', function($sce, blockUI){
        blockUI.start( $sce.trustAsHtml("<div/>"));
        blockUI.stop();
    }])

This is not a perfect solution since the injected HTML is not compiled by Angular. To mitigate this issue I was exploring the use of $compile(html)($scope). I did not quite get it working, so Angular directives do work right now.

[roymj88]

@gochinj : Did u get to find a clean solution?

[lexyfeito]

@gochinj you can use templateUrl, here you set the path to a template to use.

This is one i create using angular material. Hope it helps.

I am attaching the file since i have no idea how to add indented code here blockui.txt

[TOPS-Aman]

Is it possible to update the HTML or message without restarting the blockUI loader?