AngularJS是一个流行的前端JavaScript框架，它可以帮助开发人员更轻松地构建Web应用程序。在本文中，我们将讨论如何使用AngularJS模板来输出HTML代码。

使用ng-bind-html指令

AngularJS提供了一个名为ng-bind-html的指令，它可以将字符串作为HTML代码输出到页面上。要使用ng-bind-html指令，您需要先在控制器中定义HTML代码字符串，然后将其绑定到指令。

<div ng-controller="MyController">
  <div ng-bind-html="myHtml"></div>
</div>

angular.module('myApp', ['ngSanitize'])
.controller('MyController', function($scope, $sce) {
  $scope.myHtml = $sce.trustAsHtml('<h1>Hello World!</h1>');
});

上面的代码定义了一个名为MyController的控制器，它包含一个名为myHtml的变量。在变量中，我们定义了一个

标签，其中包含Hello World!文本。

请注意，我们使用了AngularJS的ngSanitize模块中的$sce服务来注入HTML。这是因为默认情况下，AngularJS会禁止在HTML中嵌入未经过验证的代码，以防止跨站点脚本攻击（XSS）。$sce.trustAsHtml()方法告诉框架，该HTML代码是可信任的，可以安全地在页面上输出。

使用ng-repeat指令输出HTML列表

除了ng-bind-html指令，AngularJS还提供了一个名为ng-repeat的指令。通过使用该指令，您可以轻松地从数组中循环遍历元素，并将它们输出为HTML列表。

<div ng-controller="MyController">
  <ul>
    <li ng-repeat="item in items">{{ item }}</li>
  </ul>
</div>

angular.module('myApp', [])
.controller('MyController', function($scope) {
  $scope.items = ['First Item', 'Second Item', 'Third Item'];
});

上面的代码定义了一个名为items的数组，并将其绑定到MyController控制器。在HTML模板中，我们使用ng-repeat指令将数组中的每个元素输出为li标签。

结论

AngularJS提供了多种方法来输出HTML代码。通过使用ng-bind-html指令和ng-repeat指令，您可以轻松地将HTML字符串和数组转换为可视化内容。请注意，在使用这些指令时，确保您的HTML代码是可信任的，并且已经过验证，以防止跨站点脚本攻击。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29790