我怎样才能输入文字和渲染使用angularjs的HTML? [英] How can I enter text and render the html using angularjs?
问题描述
我要绑定一个文本框的angularjs变量,并把它在一个单独的DIV输出呈现的HTML。
I want to bind a text box to an angularjs variable and have it output rendered html in a separate div.
我有:
<div ng-app="myapp">
<form:textarea ng-model="ddata" id="displayData" path="displayData"/>
<div ng-bind-html-unsafe='ddata'>
{{ddata}}
</div></div>
和所有我看到的是{{DDATA}}
and all I see is "{{ddata}}"
我想在像键入:
B粗体文字/ B>
I would like to type in something like: 'b bold text /b>
和有它呈现粗体文本。
如果有人可以张贴小提琴,我会AP preciate它极大地。
If someone could post a fiddle, I would appreciate it greatly.
推荐答案
版本,在角&LT工程; 1.2
Version that works in angular < 1.2
在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", []);
在角Works版本> 1.2(含1.2.1专门测试)
Version that works in Angular > 1.2 (specifically tested with 1.2.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
For some safer options check out $sanitize and $sce
<一个href=\"http://docs.angularjs.org/api/ngSanitize.%24sanitize\">http://docs.angularjs.org/api/ngSanitize.$sanitize
http://docs.angularjs.org/api/ng.$sce
这篇关于我怎样才能输入文字和渲染使用angularjs的HTML?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!