AngularJS'$ sce.trustAsHtml被忽略

问题描述

我是新来AngularJS，我觉得我只是刮伤的可能是怎样的框架表面。不过，我正在与sce.trustAsHtml功能出现问题。我跑AngularJS 1.2.4。

在我的应用程序，我加载使用JSON项目。这些项目显示在使用指令的列表。有时候，我会想HTML注入到所检索的内容（例如，使可点击的链接）。

我读过，我可以用$ sce.trustAsHtml允许HTML中的绑定。但是，下面的代码片段是行不通的。我希望所有的项目都用粗体文本'测试'所取代，而是它的显示＆LT;强＆GT;测试与LT; / STRONG＆GT; 为每个项目。

有一个简单的方法，使这项工作的片断？

  angular.directive（'ngStream'，函数（$超时，$ SCE）{
    VAR URL =getitems.json;
    返回{
        限制：'A'，
        范围： {}，
        templateUrl：'模板/ app_item.html'，
        控制器：['$范围，$ HTTP'，函数（$范围，$ HTTP）{
            $ scope.getItems =功能（）{
                $ http.get（URL，{}）。成功（功能（数据，状态，头，配置）{
                    $ scope.items =数据;
                }）;
            }
        }]，
        链接：功能（范围，iElement，iAttrs，CTRL）{
            scope.getItems（）;
            范围。$腕表（'项目'，函数（的newval）{如果（的newval）{
                angular.forEach（的newval，功能（增值经销商，I）{
                    ＃示例HTML字符串用于测试目的。
                    VAR editedContent ='＆LT;强＆GT;测试与LT; / STRONG＆GT;';
                    的newval [I] .contentHtml = $ sce.trustAsHtml（editedContent）
                }）;
            }}）;
        }，
    }
}）;
 

解决方案

什么是您的模板？ $ sce.trustAsHtml 必须用使用NG-绑定-HTML 而不是普通的 NG-绑定（或 {{}} ）

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

解决方案

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

这篇关于AngularJS'$ sce.trustAsHtml被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！