ng-bind工作正常，为什么ng bind-html不起作用

   angular.module('form', []).controller('formcontroller', ['$scope',
      function($scope) {
        $scope.input;
        $scope.hello = "<h1> Welcome</h1>";
      }
    ]);

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
  <form ng-app="form" ng-controller="formcontroller">
    <span ng-bind="hello"></span>
    
    <span ng-bind-html="hello"></span>
  </form>
 
</body>
</html>

我尝试使用

它导致输出为

<h1> Welcome</h1>

我通过替换ng-bind-html尝试并没有抛弃错误。

<script>
      angular.module('form', []).controller('formcontroller', ['$scope', function($scope) {
               $scope.hello="<h1> Welcome</h1>";
    }]);
    </script>
错误：$ sce：不安全要求使用安全/可信的值尝试使用在安全环境中不安全的值。

请解释。

如果包含angular-sanitize脚本，则通过将HTML解析为令牌

对输入进行消毒

var miAp = angular.module('miAp', ['ngSanitize']);
miAp.controller('demoController', function($scope) {
     $scope.bar = "<h1> Welcome</h1>";
  });

<html>
<head>
  <meta charset="utf-8">
  <title>ngBind</title>
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js" type="text/javascript"></script>
  
  <script src="cookies.js"></script>
</head>
<body ng-app="miAp" ng-controller="demoController">
   <div ng-bind-html="bar"></div>
</body>
</html>

您可以安装并包括ngsanitize。

这应该解决错误。

当您使用ng-bind-html绑定HTML字符串时，需要对HTML进行安全标记以防止XSS和其他安全问题。默认情况下启用了Angular的严格上下文逃逸（SCE）模式。

您可以在此链接中看到更多：https：//docs.angularjs.org/error/qulque/unsafe。

要解决此问题，您可以查看此问题：删除了ng-bind-html-unsafe，我如何注入html？

希望这有所帮助！谢谢

尝试此

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js" type="text/javascript"></script>
var App = angular.module('sanitize', ['ngSanitize']);
App.controller('demoController', function($scope) {
     $scope.bar = "<h1> Welcome</h1>";
  });
<h1 data-ng-bind="hello"></h1>

相关内容

最新更新

热门标签：