javascript - 在 AngularJs 中构建自定义过滤器时出错

Question

我正在尝试构建自定义过滤器，它将把 UTC 中的日期时间值更改为用户的时区。

由于我是 angularJs 的新手，我不确定我应该做什么以及在哪里注册过滤器。

我已将过滤器创建为名为 clientTime.js 的单独文件:

export default function(startDateTimeString) {

    let localTime  = this.$rootscope.momentTimezone.utc(startDateTimeString).toDate();
    localTime = this.$rootscope.momentTimezone(localTime).format("YYYY-MM-DD HH:mm");

    return localTime;
}

作为函数的参数，我传递 startDateTimeString，它是以下格式的日期时间字符串值:'YYYY-MM-DD HH:mm'

在我的 HTML 中，我使用了这样的过滤器:

<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in dashCtrl.upcomingSessionsDisplay" ng-switch on="row.status"
    ng-click="dashCtrl.handleClickOnUpcomingSessions(row)" title="{{dashCtrl.tooltip(row)}}">
    <td>{{row.locationName}}</td>
    <td>{{row.startDateTimeString | clientTime}}</td>
</tr>

我有 app.js，我在其中注册所有组件，例如:服务、拦截器等。所以我发现我也应该在那里注册过滤器。

我有像所有其他组件一样的导入过滤器:

import toastr from "toastr";
import _ from "underscore";
import momentTimezone from "moment-timezone";
import Components from "./components";
import Directives from "./shared/directives";
import Constants from "./shared/constants";
import Services from "./shared/services";
import Controllers from "./shared/controllers";
import AuthenticationInterceptor from "./shared/interceptors/AuthenticationInterceptor";
import ClientTime from "./shared/filters/clientTime";

并使用名称“clientTime”进行注册:

angular
    .module("examino.main", ["ui.router", "smart-table", "ui.bootstrap", "ui.tree", Directives, Components, Constants, Services, Controllers])

    .run(function($rootScope, $state, AuthenticationService) {
        $rootScope._ = _;
        $rootScope.momentTimezone = momentTimezone;

        // register listener to watch route changes
        $rootScope.$on("$stateChangeStart", function(event, toState, params) {
            let goToStateName = "login";
            let isAccessTestSessionRoute = toState.name == "testEnv" || toState.name == "testEnv.dashboard" || toState.name == "sessionExpired";
            if(toState.name !== goToStateName && !AuthenticationService.isAuthenticated() && !isAccessTestSessionRoute) {
                event.preventDefault();
                $state.go(goToStateName);
            }

            if(toState.redirectTo) {
                event.preventDefault();
                $state.go(toState.redirectTo, params);
            }
        });
    })

    .config(function($urlRouterProvider, $locationProvider, $httpProvider) {
        $locationProvider.html5Mode(true);

        $urlRouterProvider.otherwise("/login");

        $httpProvider.interceptors.push("AuthenticationInterceptor");
    })
    .filter("clientTime", ClientTime)

    .service("AuthenticationInterceptor", AuthenticationInterceptor);

angular.bootstrap(document, ["examino.main"]);

//set toastr options
toastr.options = {
    positionClass: "toast-top-full-width"
};

我很确定这会起作用，但我收到此错误:

> vendor.js:26519 Error: [$injector:unpr] Unknown provider:
> startDateTimeStringProvider <- startDateTimeString <- clientTimeFilter
> http://errors.angularjs.org/1.5.8/$injector/unpr?p0=startDateTimeStringProvider%20%3C-%20startDateTimeString%20%3C-%20clientTimeFilter
>     at vendor.js:12667
>     at vendor.js:17110
>     at Object.getService [as get] (vendor.js:17263)
>     at vendor.js:17115
>     at getService (vendor.js:17263)
>     at injectionArgs (vendor.js:17287)
>     at Object.invoke (vendor.js:17309)
>     at Object.enforcedReturnValue [as $get] (vendor.js:17156)
>     at Object.invoke (vendor.js:17317)
>     at vendor.js:17116

现在我完全明白问题是什么了，我猜 Angular 不理解过滤器的依赖关系。但我不确定这个问题的解决方案是什么。我的想法是过滤器与服务或拦截器类似，但它仍然是一个匿名函数，所以我认为这就是定义它的方式。有人可以分享他们创建过滤器的经验以及依赖性问题的可能解决方案吗？

Answer 1

问题在于您如何定义过滤器。根据文档，“angular.filter”需要一个过滤器工厂函数(编写自己的过滤器非常简单:只需在模块中注册一个新的过滤器工厂函数 - https://docs.angularjs.org/guide/filter )。

所以，你的 clientTime.js 应该是

export default function() {
  return function(startDateTimeString) {

    let localTime  = this.$rootscope.momentTimezone.utc(startDateTimeString).toDate();
    localTime = this.$rootscope.momentTimezone(localTime).format("YYYY-MM-DD HH:mm");

    return localTime;
  }
}

如您所见，该模块现在导出一个返回过滤函数的函数。现在应该可以了。