Can we use $sce.trustAsHtml(string) out of "filter"s?

Question

html:

<div ng-app="app">
  <test-d class="my-class">this should be replaced</test-d>
</div>

js:

    angular.module('app', []).directive('testD', ['$compile','$sce', function($compile, $sce) {
        return {
            restrict: 'E',
            link: function(scope, element, attrs, controller) {

                //"case 1"
                //var testElement = angular.element('<div class="{{testClass}}"><div ng-repeat="item in items">{{item.n}}.{{item.label}}</div></div>');

                //"case 2"
                var testElement = angular.element('<div class="{{testClass}}"><div ng-repeat="item in items">{{item.n}}<div class="how-to-remove-this-div" ng-bind-html="item.label|htmlize"></div></div></div>');

                scope.testClass = attrs.class;

                scope.items = [
                    //{n:10,label:$sce.trustAsHtml('<span class="with-icon">label 11</span>')},
                    // "case 1" of "testElement": no any effects (with "case 1" that would be preferred)
                    // "case 2" of "testElement": Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html

                    {n:20,label:'<span class="with-icon">label 22</span>'},
                    {n:30,label:'<span class="with-icon">label 33</span>'}
                ];

                var testElementCompiled = $compile(testElement)(scope);

                //"case 3"
                element.replaceWith(testElementCompiled);

                //"case 4"
                //element.replaceWith($sce.trustAsHtml(testElementCompiled));
            }
        }
}]).filter('htmlize', ['$sce', function($sce){
        return function(val) {
            return $sce.trustAsHtml(val);
        };
}]);

jsfiddle: http://jsfiddle.net/isnigirev/c2wRq/

Questions: 1) is it possible to use trustAsHtml out of filter context ? 2) IF NOT how to get rid of div with "how-to-remove-this-div" class in case of using "ng-bind-html" directive ?

The docs [here](http://docs.angularjs.org/api/ng.$sce) give an example of using `$sce` in a directive, so it must be possible to use it outside of a filter — tennisgent, Dec 11 '13 at 14:22
Got it (trustAsHtml) working in directive (http://jsfiddle.net/isnigirev/c2wRq/5/ ). The "Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html" error was occured when i by mistake try to call trustAsHtml twice on the same "label". — ivsn, Dec 12 '13 at 00:38
Second part of question still remains, but i will solve it with some workarounds. And anyway, it's interesting to resolve it too. — ivsn, Dec 12 '13 at 00:46

score 11 · Accepted Answer · edited Jun 15 '15 at 23:42

11

Got it (trustAsHtml) working in directive here. The "Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html" error was occured when i by mistake try to call trustAsHtml twice on the same "label".

Second part of question still remains, but i will solve it with some workarounds. And anyway, it's interesting to resolve it too.

edited Jun 15 '15 at 23:42

mariowise

2,167
2
21
34

answered Dec 12 '13 at 00:51

ivsn

193
1
2
11

score 4 · Answer 2 · edited Jun 03 '15 at 12:50

4

Article is the text to display

<div ng-app="app">
<span data-ng-bind-html="article| to_trusted"></span>
</div>

And filter as:

 app.filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

edited Jun 03 '15 at 12:50

Jonas Czech

12,018
6
44
65

answered Jun 03 '15 at 12:46

Anuraj

2,551
21
26

1

I use this code and it's showing error :** Error: $sce:itype String Value is Required for SCE Trust Call**how to solve it? – Ahmed Jun 24 '16 at 16:43
a bit late, but make sure you are passing a string into `trustAsHtml` – not undefined, not null, not a list, but a string. – blacklwhite Aug 02 '17 at 12:56

Can we use $sce.trustAsHtml(string) out of "filter"s?

2 Answers2

Linked