angularjs - 如何使用 ng-bind-html？

Question

任何想法为什么这个绑定(bind)不起作用？

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 绑定(bind)起作用，您的模块需要有 ngSanitize注入(inject)以及文件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 (这可能是 的 在 future 版本的 Angular 中执行此操作的方式)。