CODEWITHSUNDEEP
javascriptangularjs
Robin
Robin

Reputation: 313

AngularJS' $sce.trustAsHtml being ignored

I'm new to AngularJS and I feel like I'm just scratching the surface of what's possible with the framework. However, I'm running into problems with the sce.trustAsHtml function. I'm running AngularJS 1.2.4.

In my application, I'm loading items using JSON. These items are displayed in a list using a directive. Sometimes, I would want to inject HTML into the retrieved content (e.g. to make links clickable).

I've read I can use $sce.trustAsHtml to allow html in the binds. However, the following snippet isn't working. I would expect all items to be replaced with a bold text 'test', but instead it's displaying <strong>Test</strong> for each item.

Is there a simple way to make this snippet work?

angular.directive('ngStream', function($timeout, $sce) {
    var url = "getitems.json";
    return {
        restrict: 'A',
        scope: {},
        templateUrl: 'templates/app_item.html',
        controller: ['$scope', '$http', function($scope, $http) {
            $scope.getItems = function() {
                $http.get(url,{}).success(function(data, status, headers, config) {
                    $scope.items = data;
                });
            }
        }],
        link: function(scope, iElement, iAttrs, ctrl) {
            scope.getItems();
            scope.$watch('items', function(newVal) { if (newVal) {
                angular.forEach(newVal, function(vars,i) {
                    # Example html string for testing purposes.
                    var editedContent = '<strong>Test</strong>';
                    newVal[i].contentHtml = $sce.trustAsHtml(editedContent)
                });
            }});
        },
    }
});

Upvotes: 2

Views: 3280

Answers (1)

tungd
tungd

Reputation: 14907

What's on your template? $sce.trustAsHtml must be used with ng-bind-html instead of normal ng-bind (or {{}})

Upvotes: 7

Related Questions