Question

目前，我正在从输入字段中读取数据，该数据被推入控制器中的对象，然后数据显示在视图中，如下所示：

<ul class="status_list">
  <li data-ng-repeat="comment in comments" class="status">
    {{ comment.data }}
  </li>
</ul

如果comment.data包含#word，我想这样做，它会被<span class='x'>#word</span>取代。但我不太确定如何： 1）搜索视图中的数据 2）将html附加到它

Answer 1

您可以使用自定义过滤器执行此操作。

app.filter("AddSpan", function() {
  return function(item) {

    if (item.indexOf("#word") > -1) {
      return "<span class='x'>" + item + "</span>";
    } else {
      return item;
    }
  }
});

因为您正在动态添加HTML，所以您还需要告诉Angular“不安全地”绑定它，而不是像默认情况下那样转义HTML。

  <li data-ng-repeat="comment in comments" class="status" ng-bind-html-unsafe="comment.data | AddSpan"></li>

IMO这是一个比向$ scope添加方法更清晰的解决方案 - 我不认为HTML属于控制器，而过滤器是为了这样的情况设计的，只是想修改数据的外观。 / p>

Answer 2

考虑通过Javascript动态添加跨度，然后使用ng-bind-html-unsafe将该值绑定到您的视图。

1）在$ scope上创建一个方法来进行文本替换。

$scope.GetDataWithHtml = function() {
   return $scope.comment.data.replace(/\#word/gi, '<span>$1</span>');
};

2）在<ul>中，绑定如下：

<dul class="status_list">
  <li data-ng-repeat="comment in comments" class="status" ng-bind-html-unsafe="GetDataWithHtml()"></li>
</ul>

Answer 3

我会使用过滤器。 {{comment.data | mkSpan}}

angular.module('myapp.filters', [])
    .filter('mkSpan', function () {
        return function (input,klass) {
            if(angular.isDefined(input)){
                return (angular.isDefined(klass)) ? '<span class="' + klass + '">' + input + '</span>' : '<span>' + input + '</span>';
            }
            return input;
        }
}); // end mkSpan / myapp.filters

angular.module('myapp',['myapp.filters']);

Answer 4

对于最近绊倒这个问题的人来说，这里是@ mikel答案的更新版本（ng-bind-html-unsafe因角度v 1.2.0而被弃用）。相反，您必须将html标记为受信任并使用ng-bind-html。

以下自定义过滤器将为所有主题标签添加跨度（coffeescript）：

angular.module('myApp', ['ngSanitize'])
.filter('pxnHashtagHighlight', ($sce)->
  (value)->
    hashtags = /(?:^|\s)(#(\w+))/gm
    $sce.trustAsHtml(value.replace(hashtags, ' <span class="tag">$1</span>'))
)

可与以下标记（jade）一起使用：

div.example(ng-bind-html="comment.data | pxnHashtagHighlight")

备注

因为我们要添加html，所以我们无法使用普通ng-bind或{{ }}简写。

此方法依赖于$sce将html标记为受信任。在较新的Android版本中，这已从核心版本中删除到ngSanitise模块中，因此您必须下载并将其添加为应用程序的依赖项。

动态添加angularjs数据的范围

4 个答案: