Question

我的页面中有一个span元素。我将单词连接到AngularJS中的单个变量，然后将该变量引用到页面中的span元素。

$scope.abc = "Downstream";
$scope.abc.concat('<b>','Upstream',</b>);

查看页面时，会显示Downstream<b>Upstream</b>

如何在Bold中单独显示Upstream这个词？

Answer 1

似乎与angular variable generating html重复。

我不知道角度，但阅读发布它很容易。只是做：

 $scope.abc = $scope.trustAsHtml($scope.abc);

HTML

<div data-ng-bind-html="abc "></div>

同时检查您的Angular版本，对于1.2或更低版本，您可以使用ng-bind-html-unsafe绑定。

<div class="post-content" ng-bind-html-unsafe="abc"></div>

这不再适用于Angular 1.2+根据TheSharpieOne的评论：

＆＃34;它已被Strict Contextual Escaping取代。请参阅docs.angularjs.org/api/ng.$sce＆＃34;

Answer 2

根据此https://docs.angularjs.org/api/ng/directive/ngBindHtml

您需要包含ngBindHtml和$ sanitize服务

在你的js文件中，它应该是

angular.module('App', ['ngSanitize'])
  .controller('Ctr', ['$scope', function($scope) {
     $scope.abc = "Downstream";
     $scope.abc2 = $scope.abc.concat('<b>','Upstream','</b>');
}]);

在你的html文件中，它应该是

<div ng-controller="Ctr">
    <p ng-bind-html="abc2"></p>
</div>

将字符串的特定单词更改为粗体

2 个答案: