AngularJS中JSON无法插入<input>标签问题求助

我之前也碰到过类似的情况，AngularJS的安全机制确实偶尔会让人摸不着头脑，咱们一步步来排查和解决：

先排查基础问题 #

1. 确认JSON中的标签未被转义
   很多时候问题根源在JSON文件本身：如果你的JSON里写的是<input type="text">（转义后的字符），ng-bind-html会把它当成纯文本显示，而非渲染成输入框。你需要确保JSON中的内容是原始的<input type="text">格式。

2. 确认$sce.trustAsHtml的使用逻辑正确
   要保证你在控制器里正确注入了$sce服务，并且对JSON返回的HTML内容调用了trustAsHtml方法。示例代码如下：

   angular.module('myApp', [])
     .controller('MyCtrl', ['$scope', '$sce', function($scope, $sce) {
       // 模拟从JSON加载的数据
       const jsonData = { name: '这是<em>斜体</em>文本，<input type="text" placeholder="测试输入框">' };
       $scope.myName = {
         name: $sce.trustAsHtml(jsonData.name)
       };
     }]);
   

如果能显示但Angular指令不生效 #

要是输入框能显示，但里面的ng-model、ng-click等Angular指令不起作用，那是因为ng-bind-html仅负责把HTML插入DOM，不会编译其中的Angular代码。这时候需要自定义一个指令来完成编译工作：

步骤1：创建编译HTML的自定义指令 #

angular.module('myApp')
  .directive('compileHtml', ['$compile', function($compile) {
    return function(scope, element, attrs) {
      // 监听绑定的HTML内容变化
      scope.$watch(attrs.compileHtml, function(newHtml) {
        if (newHtml) {
          element.html(newHtml);
          // 编译DOM，让Angular指令生效
          $compile(element.contents())(scope);
        }
      });
    };
  }]);

步骤2：替换ng-bind-html为自定义指令 #

把原来的<div ng-bind-html="myName.name"></div>改成：

<div compile-html="myName.name"></div>

额外排查：angular-sanitize模块的影响 #

如果你引入了angular-sanitize.js模块，它会对HTML进行更严格的过滤。虽然默认情况下它允许<input>标签，但如果你的输入框带有特殊属性（比如自定义属性），可能会被过滤。这时候可以检查sanitize的配置，或者暂时移除该模块测试是否恢复正常。

内容的提问来源于stack exchange，提问作者user5854648