javascript - 为什么 Angular 的标题过滤器对我不起作用？

Question

我正在编写一个 AngularJS 单页应用程序。

在index.html 文件中，我有以下几行:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>

我定义了一个 Controller 名称MyController。该 Controller 有一个名为 my_name 的变量，其中包含字符串“HELLO”。该 Controller 使用名为 my_fragment.html 的 HTML 模板文件。该 HTML 文件如下所示:

<div ng-controller="MyController as myCtrl" class="full_screen_container">
    MyString = {{myCtrl.my_name | lowercase}}
</div>

它有效。浏览器中的输出如下所示:

MyString = hello

但现在，我不希望 my_name 变为小写。 我希望它是 titlecased 。但是，当我在 my_fragment.html 中将单词 lowercase 更改为 titlecase 时，它失败了。这是我的浏览器中显示的内容:

MyString = {{myCtrl.my_name | lowercase}}

这是我在 Chrome 开发者控制台中看到的错误:

为什么 titlecase 不起作用？我怎样才能让它工作？

Answer 1

您提供的链接适用于您正在使用 AngularJS (1.X) 的 Angular 2+，因此该管道不存在，但您可以像这样创建自己的 titlecase 函数

function titleCase(str) {
  return str.toLowerCase().replace(/\b\S/g, function(t) { return t.toUpperCase() });
}

并像这样实现它......

MyString = titleCase(myCtrl.my_name)

如果上述方法不起作用，您可能必须执行myCtrl.titleCase(myCtrl.my_name)。