在AngularJs中构建自定义过滤器时出现错误

Question

我正在尝试构建自定义过滤器，这会将UTC中的datetime更改为用户时区的值。

由于我是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 

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

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; 
 
    } 
 
}

正如你所看到的，现在模块出口，返回你的过滤功能的函数。现在它应该工作。

Answer 2

我没用过那么多，但我所记得的，你需要创建一个过滤器组件，像这样

angular.module('yourModule') 
    .filter('clientTime', function() { 
     // Your code 
    }); 

过滤器和我没有看到它在您的文章。也许这就是为什么它不起作用？