如何使用ng-bind-html？

Question

你知道为什么这个绑定不起作用吗？

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
  $scope.myHTML = "<a href='#'>a link</a>";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MyCtrl">
  <p ng-bind-html="myHTML"></p>
</div>

Answer 1

要使HTML绑定起作用，您的模块需要注入ngSanitize以及包含文件angular-sanitize(.min).js。

​

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

function MyCtrl($scope) {
  $scope.myHTML = "<a href='#'>a link</a>";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <p ng-bind-html="myHTML"></p>
</div>

​

或者，您可以使用String Contextual Escaping (在以后的Angular版本中，它可能会以的方式实现)。