ng-bind-html究竟是如何工作的

时间:2014-07-03 07:22:44

标签: angularjs

此代码取自Angular.org:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example16-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="ngBindHtmlExample">
    <div ng-controller="ngBindHtmlCtrl">
   <p ng-bind-html="myHTML"></p>
  </div>
</body>
</html>

显示文字:

  

我是一个带链接的HTML字符串!和其他东西

我不知道这篇文章的来源。我搜索了两个javascript文件,但它不在那里。如果我将“myHTML”更改为其他文本,则不会显示任何内容。有人可以解释一下ng-bind-html的含义吗?

1 个答案:

答案 0 :(得分:2)

我假设您正在讨论来自https://docs.angularjs.org/api/ng/directive/ngBindHtml

的示例

它在文件script.js中的控制器中的情况:

angular.module('ngBindHtmlExample', ['ngSanitize'])

.controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
  $scope.myHTML =
     'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>';
}]);

以下行设置它:

$scope.myHTML =
         'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>';

希望这有帮助。