Javascript HTML在NG中继器中有奇怪的结果_Javascript_Angularjs_Ionic Framework

Javascript HTML在NG中继器中有奇怪的结果

javascript angularjs ionic-framework

Javascript HTML在NG中继器中有奇怪的结果,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我正在尝试从JSON加载HTML，以便构建动态页面并构建一个简单的LMS 我有以下代码：控制器 .controller('TestCtrl', function ($scope, $stateParams) { $scope.options = [ { row: 1, type: "text", data:"<input type='text' text='no work' placeholder='Email'>", title: 'N

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

我有以下代码：

控制器

 .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' }
        ];

    });

.controller（'TestCtrl'，函数（$scope，$stateparms）{
$scope.options=[
{行：1，键入：“文本”，数据：，标题：'第一'}，
{行：1，键入：“文本”，数据：“这项工作”，标题：“第二号”}，
{行：1，键入：“textbox”，数据：“this works”，标题：“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>

第二个两个工作，但第一个没有回报。其渲染方式如下（忽略红色箭头）：

尝试将第一个输入标记属性从“文本”更改为“值”

data:"<input type='text' value='no work' placeholder='Email'>",

数据：“”，
关闭输入标签

data:"<input type='text' value='no work' placeholder='Email' />"

数据：“
这实际上是一个角度反模式（模型中的html）。在插值过程中有可能会删除输入（就像脚本标记一样）

查看$ngSanitize和$sce的文档。ng bind使用$sanitize过滤掉不安全的html（我相信这包括输入元素）。您可以使用$sce覆盖此选项（不推荐），告诉angular文本是可信的，不需要使用消毒剂。
我认为这可能会让您了解需要做什么。我已经组装了一个过滤器，它可以使HTML安全地用于ng bind HTML指令

app.controller（'MyController'，函数（$scope，$sce）{ $scope.someHtmlContent=“标签：”； $scope.h=函数（html）{ 返回$sce.trustAsHtml（html）； }; }); app.filter（'trustAsHtml'，函数（$sce）{return$sce.trustAsHtml；}）；
这是一个非离子版本的视图，显示它：

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

基本上，我创建了一个过滤器（“trustAsHtml”），通过使用$sce服务的trustAsHtml（）方法（ngSanitize模块的一部分），告诉AngularJS信任您的HTML。不过，您必须注意，您提供的HTML确实能够抵御来自用户等的攻击代码。
嘿-谢谢，我刚才添加了这一点以供澄清。如果没有任何文本/值属性，则无法正常工作。非常感谢您花时间向我解释这一点。这很有道理。我欠你人情，谢谢
<body ng-controller="TestCtrl"> <ul> <li ng-repeat="item in options"> <div ng-bind-html="item.data | trustAsHtml"></div>  </li> </ul> </body>