preserving换行符在AngularJS换行符、preserving、AngularJS

2023-09-13 04:40:21 作者:我想劫持你

我正在使用AngularJS的应用程序。我的控制器看起来是这样的:

 函数TestCtrl($范围){  $ scope.lines ='变种X = 1; \\ NVAR Y = 2;';} 

我的看法是这样的:

 < D​​IV NG控制器=TestCtrl>  &所述p为H.;    输出:< BR />    < code> {{行}}< / code>  &所述; / P>< / DIV> 

在该视图显示在值 $ scope.lines 被渲染上一行是这样的:

  VAR X = 1;变种Y = 2; 
10 个非常有用的AngularJS 框架

不过,我想它显示为:

  VAR X = 1;变种Y = 2; 

我是什么做错了吗?我试图切换 \\ n < BR /> ,但是,没有任何工作。

解决方案

到目前为止,它会使用 NG-绑定-HTML 来唯一能做的( -unsafe )(检查你的角度版本,因为您可能需要使用 $ SCE )绑定到HTML元素,像这样

角1.0.X:

 < code NG绑定HTML的不安全=行>< / code> 

角1.2 +

 < 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 =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.0.8/angular.min.js\"></script>\r&LT; D​​IV NG-应用&GT;\r  &LT; D​​IV 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 =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r&LT; D​​IV NG-应用&GT;\r  &LT; D​​IV 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:

Angular 1.0.X:

<code ng-bind-html-unsafe="lines"></code>

Angular 1.2+:

<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>