gpt4 book ai didi

javascript - NG-Repeater 中的 HTML 有奇怪的结果

转载 作者:行者123 更新时间:2023-11-28 00:37:02 25 4
gpt4 key购买 nike

我正在尝试从 JSON 加载 HTML,以便我可以构建动态页面并构建一个简单的 LMS。

我有以下代码:

Controller

 .controller('TestCtrl', function ($scope, $stateParams) {

$scope.options = [
{ row: 1, type: "text", data:"<input type='text' text='no work' placeholder='Email'>", title: 'Number One' },
{ row: 1, type: "text", data: "<p>this works</p>", title: 'Number Two' },
{ row: 1, type: "textbox", data: "<div class='ho'>this works</div>", title: 'Number Two' }
];

});

HTML

<ion-view view-title="Test List">
<ion-content>
<ion-item ng-repeat="item in options">
<div ng-bind-html="item.data"></div>
</ion-item>
</ion-content>
</ion-view>

后两个有效,但第一个没有返回任何内容。它呈现如下(忽略红色箭头):

enter image description here

最佳答案

我认为这可能会让您深入了解您需要做什么。我已经组合了一个过滤器,可以使 HTML 在 ng-bind-html 指令中安全使用。 Here's a Plunk showing it working .

app.controller('MyController', function($scope, $sce) {
$scope.someHtmlContent = "<i>Label:</i> <input name='test'>";

$scope.h = function(html) {
return $sce.trustAsHtml(html);
};
});

app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });

这是显示它的 View 的非 Ionic 版本:

<body ng-controller="TestCtrl">
<ul>
<li ng-repeat="item in options">
<div ng-bind-html="item.data | trustAsHtml"></div> <!-- note the filter -->
</li>
</ul>
</body>

基本上,我创建了一个过滤器('trustAsHtml'),它告诉 AngularJS 通过使用 $sce 服务的 trustAsHTML() 方法(ngSanitize 模块的一部分)来信任您的 HTML。不过,您必须小心,您提供的 HTML 确实可以安全地抵御来自用户等的攻击代码。

关于javascript - NG-Repeater 中的 HTML 有奇怪的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28385961/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com