javascript - AngularJS' $sce.trustAsHtml being ignored - Stack Overflow

admin管理员组

文章数量:1420073

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)
                });
            }});
        },
    }
});

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)
                });
            }});
        },
    }
});

• javascript
• angularjs

Share Improve this question Follow asked Dec 10, 2013 at 11:05 RobinRobin 31366 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptAngularJS39 scetrustAsHtml being ignoredStack Overflow