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，它是这种格式的日期时间的字符串值：＆＃39; YYYY-MM-DD HH：mm＆＃39;

在我的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";

并使用名称＆＃39; clientTime＆＃39;：

进行注册

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

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

Answer 1

问题在于您如何定义过滤器。＆＃39; angular.filter＆＃39;根据文档（编写您自己的过滤器非常简单：只需在您的模块中注册一个新的过滤器工厂函数 - https://docs.angularjs.org/guide/filter），我们需要一个过滤器工厂功能。

所以，你的clientTime.js应该是

＆＃13;

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

＆＃13;

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

Answer 2

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

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

我没有在你的帖子中看到它。也许这就是为什么它不起作用？

在AngularJs中构建自定义筛选器时出错

2 个答案: