javascript - 创建过滤器以在 Angular JS 中编译动态字符串

Question

这个问题已经有答案了:

how to compile results of filter before rendered in angularjs (1 个回答)

已关闭 9 年前。

嗨，我是 Angular JS 的新手，刚刚开始掌握它，我正在尝试创建一个过滤器来编译存储在数据库中的给定字符串。下面的 HTML 将 History.activity 传递到我的动态过滤器，并附加 :this 以传递当前范围。

<ul>
  <li ng-repeat="history in recentActivity">
    {{ history.activity | dynamic:this }}</p>
  </li>
</ul>

history.activity 变量包含一个 Angular 模板格式的字符串，如下所示，这些字符串会根据记录的事件从数据库中提取而有所不同。

{{ history.username }} logged in at {{ history.created_date | date }}

下面的过滤器非常基本，应该编译源代码，但它只是返回未定义......

app.filter('dynamic', function ($compile) {
  return function (source, scope) {
    return $compile(source)(scope);
  };
});

有什么想法吗？我哪里出了问题？非常感谢任何帮助:)

Answer 1

如果您的 activity 变量不包含 HTML，而仅包含 Angular 表达式，那么您需要使用 $interpolate 而不是 $compile - check the angular.js docs for it 。

如果您需要动态放置一些 HTML，那么您需要像 Jonathan 所说的指令 - 过滤器不能用于包含 HTML。

但实际上我还是建议使用指令 - 编译/插值都相对较慢，因此最好仅在表达式更改时调用它们(这可以通过 $watch 来实现) > 调用内部指令)。过滤器表达式在每个摘要循环中被调用两次，如果您经常使用此过滤器，您可能会遇到性能问题。