我正在使用AngularJS的应用程序。我的控制器看起来是这样的:
函数TestCtrl($范围){ $ scope.lines ='变种X = 1; \\ NVAR Y = 2;';}
我的看法是这样的:
< DIV NG控制器=TestCtrl> &所述p为H.; 输出:< BR /> < code> {{行}}< / code> &所述; / P>< / DIV>
在该视图显示在值 $ scope.lines
被渲染上一行是这样的:
VAR X = 1;变种Y = 2;
不过,我想它显示为:
VAR X = 1;变种Y = 2;
我是什么做错了吗?我试图切换 \\ n
与< BR />
,但是,没有任何工作。
到目前为止,它会使用 NG-绑定-HTML
来唯一能做的( -unsafe
)(检查你的角度版本,因为您可能需要使用 $ SCE
)绑定到HTML元素,像这样
< code NG绑定HTML的不安全=行>< / code>
< code NG绑定-HTML =行>< / code>
但需要 $ SCE
:
$ scope.lines = $ sce.trustAsHtml('变种X = 1;< BR />变种Y = 2;');
当然,使用HTML换行:< BR />
下面是一个工作的例子: http://jsfiddle.net/3fha088t/
这里作为一个片断同样的例子:
\r\r
函数TodoCtrl($范围){\r $ scope.lines ='变种X = 1;< BR />变种Y = 2;';\r}
\r
&LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.0.8/angular.min.js\"></script>\r&LT; DIV NG-应用&GT;\r &LT; DIV NG控制器=TodoCtrl&GT;\r &LT; P&GT;工作版本:其中; / P&GT;\r &LT; code NG绑定HTML的不安全=行&GT;&LT; / code&GT;\r &LT; P&GT;原始版本:其中; / P&GT;\r &LT; code&GT; {{行}}&LT; / code&GT;\r &LT; / DIV&GT;\r&LT; / DIV&GT;
\r\r\r
角1.2版本,使用$ SCE:
\r\r
函数TodoCtrl($范围,$ SCE){\r $ scope.lines = $ sce.trustAsHtml('变种X = 1;&LT; BR /&GT;变种Y = 2;');\r}
\r
&LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r&LT; DIV NG-应用&GT;\r &LT; DIV NG控制器=TodoCtrl&GT;\r &LT; P&GT;工作版本:其中; / P&GT;\r &LT; code NG绑定-HTML =行&GT;&LT; / code&GT;\r &LT; P&GT;原始版本:其中; / P&GT;\r &LT; code&GT; {{行}}&LT; / code&GT;\r &LT; / DIV&GT;\r&LT; / DIV&GT;
\r\r\r
I am working on an app that uses AngularJS. My controller looks like this:
function TestCtrl($scope) {
$scope.lines = 'var x=1;\nvar y=2;';
}
My view looks like this:
<div ng-controller="TestCtrl">
<p>
Output:<br />
<code>{{lines}}</code>
</p>
</div>
When the view is rendered, the value in $scope.lines
is rendered on a single line like this:
var x=1; var y=2;
However, I want to display it as:
var x=1;
var y=2;
What am I doing wrong? I tried switching \n
with <br />
, however, that did not work either.
So far, the only way to do it would be using ng-bind-html
(-unsafe
) (check your angular version because you might need to use $sce
) to bind HTML to an element, like this:
<code ng-bind-html-unsafe="lines"></code>
<code ng-bind-html="lines"></code>
but it needs $sce
:
$scope.lines = $sce.trustAsHtml('var x=1;<br />var y=2;');
And of course, use the HTML line break: <br />
Here is a working example: http://jsfiddle.net/3fha088t/
Same example here as a snippet:
function TodoCtrl($scope) {
$scope.lines = 'var x=1;<br />var y=2;';
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<p>Working version: </p>
<code ng-bind-html-unsafe="lines"></code>
<p>Original version: </p>
<code>{{lines}}</code>
</div>
</div>
Angular 1.2 version, using $sce:
function TodoCtrl($scope, $sce) {
$scope.lines = $sce.trustAsHtml('var x=1;<br />var y=2;');
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<p>Working version: </p>
<code ng-bind-html="lines"></code>
<p>Original version: </p>
<code>{{lines}}</code>
</div>
</div>
上一篇:AngularJS NG-SRC条件,如果没有找到(通过URL)如果没有、条件、NG、AngularJS
下一篇:如何安装和使用$ anchorScroll在AngularJS的yOffset财产财产、anchorScroll、AngularJS、yOffset