AngularJS的datepicker返回快照

Question

你好，我希望提供一个日期拾取器(材料套件UI)，当我返回一个页面上的快照图像列表时，过滤返回快照的日期。然而，我得到一个注入器错误:angular.js:13920错误:[$injector:unpr]未知提供商:dayFilterFilterProvider &lthttp://errors.angularjs.org/1.5.8/$喷射器/unpr ? p0 = dayFilterFilterProvider % 20% 3 c-nanayfilterfilter

指令如下:

(function () {
    "use strict";
    app.controller("MainController", [
        "$rootScope",
        "$scope",
        function ($rootScope, $scope) {
            $scope.dayFilter = null;
            $scope.dayFilter = function(items, date) {
                return function(items, date) {
                    $rootScope.dateFilter = date;
                    var filtered = [];
                    var begin, end
                    begin = date.setHours(0, 0, 0);
                    end = date.setHours(23, 59, 59);
                    angular.forEach(items, function(item) {
                        if (item > begin && item < end) {
                            filtered.push(item)
                        }
                    })
                    console.log("Filtered day", date)
                    return filtered
                }
            };
                $scope.dayFilter(new Date(), 'date');

这里是html:

<div class="dropdown">
        <h3 class="dropdown-toggle" id="day-datetimepicker" role="button" data-toggle="dropdown" data-target="#"> {{ filtered.date ? filtered.date.label : 'Day' }} <span class="caret"></span></h3>
        <ul class="dropdown-menu" role="menu" aria-labelledby="day-datetimepicker">
            <datetimepicker data-ng-model="dateFilter" data-datetimepicker-config="{
                dropdownSelector: '#day-datetimepicker',
                minView: 'day',
                startView: 'day'
            }" data-on-set-time="dayFilter(newDate, 'day')"></datetimepicker>
        </ul>
    </div>
    <a ng-repeat="s in chui.snapshot | dayFilter:'day' | orderBy:'-date'"
        ng-click="select('snapshot', s);
            modal('snapshot-keyholder', true);"
        class="snapshot-thumbnail col-xs-6 col-sm-4 col-md-3 col-lg-2"
    >

如果你还有什么问题，请告诉我。万分感谢

作为对第一个答案的响应，我创建了这个模块:

 app.filter("dayFilter",[
        function () {
            return function dayFilter(items,date) {
                var d = new Date();
                var filteredItems = [];
                var begin, end
                begin = d.setHours(0, 0, 0);
                end = d.setHours(23, 59, 59);
                angular.forEach(items, function(item) {
                    if (item > begin && item < end) {
                        filtered.push(item);
                    }
                })
                console.log("Filtered day", d);
                return filteredItems
            }
            $filter("dayFilter");
            // dayFilter(new Date(),'date');
        }]);

I no longer get an error, but the snapshots do not appear in the output, even though I get the following in the console:
iltered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)

Answer 1

模板在ng-repeat指令中使用dayFilter。要向模块添加过滤器，请使用module.filter方法:

app.filter("dayFilter", () => {
   return function dayFilter(items, date) {
       //filter code
       return filteredItems;
   };
});

要在控制器中实例化过滤器，使用$filter服务:

$filter("dayFilter");

更多信息，请参见AngularJS开发者指南——创建自定义过滤器