Question

我在将标签放入AngularJS网络应用程序时遇到问题。它正好从JSON文件加载数据。它还会识别我的HTML标记，例如<em>和<br />。我通过$ sce trustAsHtml实现了这一点。但它不适用于<input>标签。我已经尝试了两天，但我找不到有效的解决方案。感谢帮助和解释！

的index.html

<div ng-bind-html="myName.name"></div> <!-- The Test from the data.json file shows up in italic but the input does not show up in the DOM -->

app.js

var myApp = angular.module('myApp', [
    'ngRoute',
    'ngSanitize',
    'ngAnimate',
    'QuizController'
]);

myApp.filter('trustAsHtml', [
    '$sce',
    function($sce) {
        return function(value) {
            return $sce.trustAsHtml(value);
        }
    }
]);

data.json

"name" : "<em>Test</em> <input type='text' name='Hello'>"

Answer 1

您已经定义了一个过滤器（trustAsHtml），您不会将其应用于您的值。因此，ng-bind-html的内容不会通过过滤器运行，实际上并不受信任。

正如georgeawg在下面的评论中指出的那样，实际上允许ng-bind-html $sce.trustAsHtml()通过<em>而不需要通过<input>和ng-bind-html }是其中一个标签。

但<div class="txt" ng-bind-html="myName.name | trustAsHtml"></div>不是。

因此，您需要应用过滤器以通过(function(){ // Declare App var app = angular.module('testApp',[]); app.controller('testCtrl', ['$scope','$timeout', function($scope, $timeout){ $scope.waiting = true; $timeout(() => { $scope.waiting = false; $scope.name = "<em>Test</em> <input type='text' name='Hello'>"; }, 1000); }]).filter('trustAsHtml', [ '$sce', function($sce) { return function(value) { return $sce.trustAsHtml(value); } } ]); })();允许不安全的代码，方法是将标记更改为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>

<div ng-app="testApp">
 <div ng-controller="testCtrl">
  <div ng-bind-html="name | trustAsHtml"></div>
  <div ng-show="waiting">let's wait a second...</div>
  </div>
</div>

~~虽然我还没有在AngularJS环境中对它进行过实际测试，但它应该可行。要做到这一点，我首先需要知道您正在使用的版本。~~

看到它在这里工作：

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

Answer 2

从您的示例中，您不清楚如何使用trustAsHtml过滤器。

无论如何，似乎$sce.trustAsHtml()正在完成工作：

＆＃13;

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
    $scope.myHTML = $sce.trustAsHtml(
       "<em>Test</em> <input type='text' name='Hello'>");
  }]);
})(window.angular);

/*
Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-bind-html-production</title>

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>
  <script src="script.js"></script>
  
 
</head>
<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
    <p ng-bind-html="myHTML"></p>
  </div>
</body>
</html>

＆＃13;

但请记住，您无法使用ng-model使用这样的输入，因为您需要先编译它。您需要$compile服务。

AngularJS JSON不会插入<input />标记

2 个答案: