为什么 AngularJS 自定义过滤器不起作用？

Question

我正在使用 angular.min.js 文件 (AngularJS v1.6.4)

我正在尝试实现一个简单的过滤器来反转字符串。

这是我的代码：

main.js:

var app = angular.module("angularBlackbox", []);

app.filter('reverse', function () {
   return function (item) {
       item.split("").reverse().join("");
   };
});

app.controller("MyController", function ($scope) {
    $scope.data = {
        message: ""
    };

    $scope.reversedMessage = function (message) {
        return message.split("").reverse().join("");
    }
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Blackbox</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div ng-app="angularBlackbox">
    <div ng-controller="MyController">
        <input type="text" ng-model="data.message">
        <h1>{{ data.message }}</h1>
        <h1>{{ reversedMessage(data.message) }}</h1>
        <h2>{{ data.message | reverse }}</h2>
    </div>
</div>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

我得到这样的结果：

所以我们可以看到：

数据绑定有效[OK]；
控制器的功能 reversedMessage 有效 [OK];
过滤器不起作用[不正常]（标题<h2>{{ data.message | reverse }}</h2>不可见）

为什么自定义过滤器不起作用？

Answer 1

return 过滤器的格式化输出。

app.filter('reverse', function () {
   return function (item) {
       //returned reversed string from here.
       return item.split("").reverse().join("");
   };
});

Check Here

Answer 2

// 你需要return过滤后的数据。

app.filter('reverse', function () {
   return function (item) {
       return item.split("").reverse().join("");
   };
});

为什么 AngularJS 自定义过滤器不起作用？

Why AngularJS custom filter not working?

angularjs

angularjs-filter