Custom Widgets - $sce

Submitted by Sean McP on Tue, 03/29/2016 - 05:31
1
0
-1

Question 2)

We are generating HTML in some connectors that needs to be displayed on the page. Normally this is not allowed and requires special handling.

We have found the ngSanitize is depreciated and want to use $sce instead.

But $sce has to be injected into our controller, it's not available by right.

Our template looks like:

<div ng-bind-html="thisCanBeusedInsideNgBindHtml | sanitize"></div>

We've made our controller code like this:

function ($scope, $sce) {
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml("<i>this text will be OK</i>");
}

but we keep getting an error:

vendor.min.js:102 Error: [$injector:unpr] http://errors.angularjs.org/1.3.18/$injector/unpr?p0=sanitizeFilterProvider%20%3C-<div ng-bind-html="thisCanBeusedInsideNgBindHtml | sanitize">anitizeFilter
    at Error (native)
    at http://localhost:9662/designer/runtime/js/vendor.min.js:6:417
    at http://localhost:9662/designer/runtime/js/vendor.min.js:38:7
    at Object.d [as get] (http://localhost:9662/designer/runtime/js/vendor.min.js:36:13)
    at http://localhost:9662/designer/runtime/js/vendor.min.js:38:81
    at Object.d [as get] (http://localhost:9662/designer/runtime/js/vendor.min.js:36:13)
    at .$filter (http://localhost:9662/designer/runtime/js/vendor.min.js:141:92)
    at lb.filter (http://localhost:9662/designer/runtime/js/vendor.min.js:195:127)
    at lb.filterChain (http://localhost:9662/designer/runtime/js/vendor.min.js:195:77)
    at lb.statements (http://localhost:9662/designer/runtime/js/vendor.min.js:194:378)

How do we use $sce to sanitize our coded HTML for display on the Page?

NOTE: the error

http://errors.angularjs.org/1.3.18/$injector/unpr?p0=sanitizeFilterProvider%20%3C-<div ng-bind-html="thisCanBeusedInsideNgBindHtml | sanitize">*anitizeFilter*

where is the s in anitizeFilter?

Custom Widget
$sce
1 answer

Submitted by Sean McP on Tue, 03/29/2016 - 05:39
1
0
-1
This one is the BEST answer!

ANSWERED:

When using $sce don't mix up ngSanitize and $sce...

So when a variable has HTML text in it you can do this:

template =

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

controller =

function ($scope, $sce) {
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml("<i>this text will be OK</i>");
}

the HTML can come from a variable by using

function ($scope, $sce) {
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml($scope.properties.propertyName);
}

where propertyName is Dynamic value, Text and you can point the attribute to a page variable,

regards
Seán

Notifications