角度是否有对字符串的渲染？答案

【问题标题】：Does angular have a render to string?角度是否有对字符串的渲染？
【发布时间】：2014-07-25 23:10:22
【问题描述】：

我可以创建要在页面中显示的模板，但是如果我想格式化一些字符串以用于其他目的，例如调试，或向服务器发送简单消息，甚至将字符串插入到 ng-repeat 会选择的数组中怎么办？继续。

是否有一种类似于车把的角度机制，我可以编译模板然后将其渲染为字符串而不是渲染到 DOM 中？

【问题讨论】：

【解决方案1】：

您可以使用$interpolate 进行简单的字符串插值，但由于控制流通过指令与 DOM 元素绑定的方式，您可能更难以明智地将更复杂的结构转换为字符串。

例如：

var i = $interpolate('{{ some }} string {{ interpolation|capitalize }}');
var s = i({ some: 'Some', interpolation: 'thing' });

使用指令提供的更丰富的控制流所面临的挑战是想出一种合理的方法来从结果中生成一个简单的字符串（而不是 HTML）。考虑：

<div>
    <div ng-if="this">This thing</div>
    <div ng-if="that">That thing</div>
</div>

您可以使用$compile 编译它，但充其量您会得到这样的结果（例如，假设thisThing 是true 并且thatThing 是false）：

<div>
    <div ng-if="thisThing">This thing</div>
</div>

但这作为一个简单的字符串并不是特别有用（当然，它作为 DOM 节点很有用——这是$compile 的重点）。您可能可以将它用作某些 HTML 的模板，但是当您将其转换为字符串时，您将丢失所有在编译期间附加的各种侦听器等。要获得一个简单的字符串 ("This thing")，您最好使用插值：

`{{ thisThing ? 'This thing' : '' }}{{ thatThing ? 'That thing' : ''}}`

【讨论】：

$interpolate 是 Crockford 替代品的一大改进。

【解决方案2】：

我猜你正在寻找这样的东西：

HTML：

<div ng-App='app' ng-controller='myCtrl'>
    <input type='text' ng-model='textInput' />
    <button ng-click='comp()'>Compile</button>
    {{output}}
</div>

JS：

angular.module('app',[]).
controller('myCtrl', function($scope, myService){
    $scope.comp = function(){
      $scope.output = myService.getCompiledStr($scope,$scope.textInput);  
    }
}).
service('myService',function($compile){
    this.getCompiledStr = function(scope,str){
        try{
            return $compile(str)(scope)[0].outerHTML;
        }
        catch(e){
            return null;    
        }
    }
});

Fiddle

附：
正如另一个答案中所说，使用$interpolate 可能有更好的方法来做到这一点。

【讨论】：