在AngularJS的$ scope变量中更改文本的字体颜色

Question

我正在使用AngularJS。 我有一个范围变量$scope.TextToUser ，该变量以html打印，可在网站上显示给用户。 在我的控制器中，代码很简单，看起来像这样；

$scope.TextToUser='UserText'

在相应的html页面上，代码仅为{{TextToUser}} 。

我试图通过在控制器中使用以下代码将文本变成红色；

$scope.TextToUser = '<font size="3" color="red"> 'UserText'</font>'

不幸的是，在html页面上，整个字符串被打印出来，而UserText却没有红色。 如何将文字变成红色？ 简单，直接的方法将是首选。

Answer 1

好吧，下面的比较合适：

app = angular.module('<name of your app>', ['ngSanitize']);

app.controller('<controller name>', function($scope, $interpolate){
    $scope.Text = 'Test to User In Red';
    $scope.TextToUser = $interpolate('<font size="3" color="red">{{Text}}</font>')($scope);
});

现在绑定html ：

<span ng-bind-html="TextToUser"></span>

您需要包括清理脚本。 https://code.angularjs.org/1.3.2/angular-sanitize.js

注意：-我尝试使用$interpolate但是如果没有ngSanitize它会给出有关unsafe内容的错误。

工作的朋克在这里 。