围绕angularjs数据动态添加跨度

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

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

{{comment.data}}

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

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

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

$scope.GetDataWithHtml=function（）{
返回$scope.comment.data.replace（/\\ word/gi，$1'）；
};

2） 在您的
中，按如下方式绑定：

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

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

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

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

app.filter（“AddSpan”，function（））{
返回函数（项目）{
if（项目索引of（“#单词”）>-1）{
返回“+项目+”；
}否则{
退货项目；
}
}
});

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

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

---

在我看来，这是一个比在$scope中添加方法更干净的解决方案-我认为HTML不属于控制器，并且过滤器是为这样的情况设计的，当您只想修改数据的外观时。

我会使用过滤器。{{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']);

angular.module（'myapp.filters'，[]）
.filter（'mkSpan'，函数（）{
返回函数（输入，klass）{
如果（角度定义（输入））{
返回（角度定义（klass））？“”+输入+“”：“”+输入+“”；
}
返回输入；
}
}); // 结束mkSpan/myapp.filters
angular.module（'myapp'，['myapp.filters']）；

---

{{comment.data | mkSpan:myCssClass}

对于最近遇到这个问题的任何人，这里是@mikel答案的更新版本（

ng bind html unsafe

自angular v 1.2.0以来一直被弃用）。相反，您必须将html标记为受信任的，并使用

ng bind html

以下自定义筛选器将为所有hashtags（coffeescript）添加一个范围：

注释

• 因为我们想添加html，所以不能使用普通的

  ngbind

  或

  {}

  速记
• 此方法依赖于

  $sce

  将html标记为受信任。在较新的android版本中，该功能已从core中删除到

  ngSanitise

  模块中，因此您必须下载该功能并将其作为应用程序的依赖项添加

---

您的意思是通过分配给comment.data的字符串进行文本搜索，并用其他字符串替换它吗？这个返回函数是trippy，我修改了代码，因此出现了警报（）；在返回函数（..）调用之前，它只在第一次运行，然后跳过它，这是否意味着筛选器“AddSpan”函数不是每次都被调用，而angular只是将筛选器函数放在全局堆栈上以供参考？

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")