范围内的 Angular HTML 标记答案

【问题标题】：Angular HTML markup in scope范围内的 Angular HTML 标记
【发布时间】：2014-03-21 02:45:33
【问题描述】：

也许这是一个愚蠢的问题，但我对 Angular 很陌生，并试图学习一些知识。所以我有一个通过 API ($http) 获得的范围，转换后是一个 html 标记

<li>some list</li>

我想在 DOM 中投影这个，尝试

<ul>{{myscopevariable}}</ul>

但我只得到原始文本

使用 php 就像<ul><?= myscopevariable ?></ul>

【问题讨论】：

使用 Angular 修改 DOM 时，通常使用指令。如果您只想包含一些 HTML 的 sn-p，您可以在元素上使用 ng-bind-html（需要包含 angular-sanitize.js 和“ngSanitize”依赖项），另一个可能有用的指令是 ng-include。或者，如果现有指令都没有达到目标，您可以编写自己的指令。我会看看我是否可以在这里拼凑一个答案。查看 egghead.io 和 YouTube AngularJS 最佳实践视频，了解一些提升信息。
感谢您的建议，我将检查我的依赖项。一个例子也将不胜感激。再次感谢

标签： html angularjs angularjs-scope

【解决方案1】：

angular.module("myApp", ["ngSanitize"]).controller("MyCtrl", function($scope){
  $scope.someHTML = "<li>just testing</li>";
})

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyCtrl">
    <h1>Hello Plunker!</h1>
    <ul ng-bind-html="someHTML">
    </ul>
  </body>

</html>

http://plnkr.co/edit/e1zoOrEVwqdIDPujMpPC?p=preview

【讨论】：

我想我会喜欢 angular！
fefe 确实不得不承认我已经成为一个狂热的男孩，我通常不喜欢他们 :) 我仍然不是 JS 的忠实粉丝，但该框架使它对我更有吸引力.仅供参考，一般来说，在你的控制器中进行 DOM 操作是不受欢迎的，因为这意味着你不能独立于视图（它变得耦合）测试控制器，所以如果你需要做 DOM，尽量避免它并使用指令操纵。
好的，我会尝试获取更多信息开始变得有趣
对此我可以问一件事吗？
当然，在 SO 中的拍摄对话也令人不悦，但如果它与问题相关，那很好，如果不发布另一个问题。

【解决方案2】：

使用ng-bind-html 指令（文档here）。在 1.2 之前还存在 ng-bind-html-unsafe。

在你的例子中：

<ul>some list</list>
  <li ng-bind-html='myscopevariable'></li>
  ....
</ul>

您必须包含ngSanitize 模块才能使其工作（例如，标题中的<script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script> 和var app = angular.module('plunker', ['ngSanitize']);）

查看plunker example 获取一些工作代码。

【讨论】：