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

Question

我正在尝试从 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' }
        ];

    });

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>

后两个有效，但第一个 returns 无效。它呈现为（忽略红色箭头）：

Answer 1

尝试将第一个输入标签属性从“text”更改为“value”

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

Answer 2

关闭输入标签。

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

这确实是一个 angular 反模式（html 在你的模型中）。在插值期间输入有可能被剥离（就像脚本标签一样）。

查看 $ngSanitize 和 $sce 的文档。 ng-bind 使用 $sanitize 过滤掉不安全的 html （我相信这包括输入元素）。您可以使用 $sce 覆盖它（不推荐）以告诉 angular 文本是可信的并且不需要通过消毒器。

Answer 3

我认为这可能会让您对需要做什么有所了解。我整理了一个过滤器，可以使 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; });

这是显示它的视图的非 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')，通过使用 $sce 服务的 trustAsHTML() 方法告诉 AngularJS 信任您的 HTML（ ngSanitize 模块的一部分）。不过，您必须小心，您提供的 HTML 确实可以抵御来自用户等的攻击代码。

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

HTML in NG-Repeater having strange results

javascript

angularjs

ionic-framework