创建一个封装 Angular js 功能的实用程序模块答案

【问题标题】：Creating a utility module encapsulating angular js features创建一个封装 Angular js 功能的实用程序模块
【发布时间】：2015-01-12 10:47:22
【问题描述】：

您好，我需要指针来了解如何创建一个封装 Angular js 过滤器的实用程序模块，以便我可以传递输入值 (2014-11-14T22:51:04.635Z) 进行格式化并获取格式化的 (ng-过滤器：2014 年 11 月 14 日 - 02:51 PM）从中输出。目标是利用独立于前端框架的角度 Js 过滤器属性。诸如 mustache 之类的框架在 html 中有 {{ }} 标签，而 angular 也有，当 ng-filters 直接在 html 文件中使用时，这可能会导致问题。所以我试图利用 ngFilters 而不将它们包含在 html 中。所以目标是接受来自模板的值，使用 ngFilters 将它们格式化为 JS 文件，然后将值推送回模板。

【问题讨论】：

我会编写一个 javascript 库来执行常见任务并将其用于目的......

标签： javascript angularjs date filter utility

【解决方案1】：

如果您想在不将 AngularJS 引导到您的网络应用程序的情况下访问某些 AngularJS 功能，您可以创建一个独立的注入器。

var $injector = angular.injector(['ng']);

然后您可以从中检索$filter 服务

$filter = $injector.invoke(['$filter', function ($filter) { return $filter; }]);

并且可以访问任何默认的 AngularJS 过滤器

var formattedDate = $filter('date')(originalDate, format);

【讨论】：

【解决方案2】：

如果您想格式化日期，请使用http://momentjs.com/

这就是我在 Angular 框架中使用的。

【讨论】：

【解决方案3】：

我不确定你所做的是否真的值得付出努力。我想知道更改 Angular 的开始和结束符号是否可以完全解决您的问题，以便您可以直接在 Html 中使用过滤器：

AngularJS-Twig conflict with double curly braces

在某些情况下，您需要在 javascript 中手动调用特定的过滤器。您可以使用 $filter 来执行此操作，该 $filter 需要在使用之前由 Angular 注入：

How to use a filter in a controller?

现在我希望你不需要这个，或者最好不要在普通的 Angular 应用程序中使用它，但在极少数情况下，你可能需要在非 Angular 上下文中访问 Angular 功能（如 $filter）。在这些情况下，您可以使用以下方法访问元素的 $scope：

var scope  = $("path to the DOM element").scope();

现在您可以在作用域中读写，甚至可以更好地从作用域调用函数。在这种情况下，您需要将过滤器的实例放在这样的范围内：

$scope.filterInstance = $filter;

现在你可以从任何地方调用这个过滤器实例，甚至在角度上下文之外： var scope = $("DOM 元素的路径").scope(); var 结果 = scope.filterInstance("xyz");

【讨论】：

【解决方案4】：

你可以在javascript中轻松调用$filter：

var input = '2014-11-14T22:51:04.635Z';
var format = 'd HHH yyyy - h:mm a';
var output = $filter('date')(new Date(input), format);

如果要转换数组，可以使用.map

// You need to get $filter somewhere
var format = 'd HHH yyyy - h:mm a';
var formatDate = $filter('date'); // Save (input.length - 1) function calls

input = ['2014-11-14T22:51:04.635Z', ...]
var output = input.map(function(in) {
  return formatDate(new Date(in), format);
});

要了解更多关于 date 角度过滤器的信息： https://docs.angularjs.org/api/ng/filter/date

【讨论】：