AngularJS'$ sce.trustAsHtml被忽略

时间:2013-12-10 11:05:58

标签: javascript angularjs

我是AngularJS的新手,我觉得我只是在揭示框架的可能性。但是,我遇到了sce.trustAsHtml函数的问题。我正在运行AngularJS 1.2.4。

在我的应用程序中,我正在使用JSON加载项目。这些项目使用指令显示在列表中。有时,我希望将HTML注入检索到的内容(例如,使链接可点击)。

我读过我可以使用$ sce.trustAsHtml来允许绑定中的html。但是,以下代码段不起作用。我希望所有项目都用粗体文本'test'替换,但是它会为每个项目显示<strong>Test</strong>

是否有一种简单的方法可以使这个代码段有效?

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

1 个答案:

答案 0 :(得分:7)

你的模板上有什么? $sce.trustAsHtml必须与ng-bind-html一起使用,而不是普通ng-bind(或{{}}