javascript - 如何使用 angularjs 输入文本并呈现 html？

Question

我想将一个文本框绑定到一个 angularjs 变量，并让它在单独的 div 中输出呈现的 html。

我有：

<div ng-app="myapp">
<form:textarea ng-model="ddata" id="displayData" path="displayData"/>

<div ng-bind-html-unsafe='ddata'>
{{ddata}}
</div></div>

我看到的只是“{{ddata}}”

我想输入如下内容：'b 粗体文本 /b>

并让它呈现粗体文本。

如果有人可以发布小提琴，我将不胜感激。

Answer 1

适用于角度 < 1.2 的版本

http://jsfiddle.net/AQWAR/

的HTML

<div ng-app="myapp">
<form>
    <input type="text" ng-model="ddata"/>
</form>
{{ddata}}

<div ng-bind-html-unsafe='ddata'>
</div>
</div>

JS

angular.module("myapp", []);

适用于 Angular > 1.2 的版本（专门使用 1.2.1 测试）

http://jsfiddle.net/AQWAR/1/

HTML

<div ng-app="myapp" ng-controller="MyCtrl">
<form>
    <input type="text" ng-model="ddata.someString"/>
</form>
{{ddata}}

<div ng-bind-html='ddata.trustedVersion'>
</div>
</div>

JS

angular.module("myapp", []).controller("MyCtrl", ["$scope","$sce", function($scope, $sce){
    $scope.ddata = {someString:"", trustedVersion:""}
    $scope.$watch("ddata.someString", function(newVal){
        $scope.ddata.trustedVersion = $sce.trustAsHtml(newVal);
    },true);
}]);

对于一些更安全的选择，请查看 $sanitize 和 $sce

http://docs.angularjs.org/api/ngSanitize.$sanitize

http://docs.angularjs.org/api/ng.$sce