2

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

<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 附加到它

4

4 回答 4

2

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

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 不属于控制器，并且过滤器是为像这样的情况而设计的，当您只想修改数据的外观时。

于 2013-08-29T17:18:24.350 回答
0

我会使用过滤器。{{ 评论数据 | 跨度}}

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']);

{{ 评论数据 | mkSpan:myCssClass }}

于 2013-08-29T17:22:26.597 回答
0

对于最近偶然发现这个问题的任何人，这里是@mikel 答案的更新版本（ng-bind-html-unsafe自 angular 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>'))
)

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

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

笔记

  • 因为我们要添加 html，所以不能使用plainng-bind或{{ }}速记。
  • 此方法依赖于$sce将 html 标记为受信任。在较新的 android 版本中，这已从核心中删除到ngSanitise模块中，因此您必须下载它并将其添加为您的应用程序的依赖项。
于 2014-10-16T20:25:12.383 回答
0

考虑通过 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>
于 2013-08-29T17:14:49.957 回答