创建一个封装角度 js 功能的实用程序模块

Creating a utility module encapsulating angular js features

本文关键字：js 功能 模块 实用程序 封装 一个 创建      更新时间：2023-09-26

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

您可以在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

如果你想访问一些AngularJS功能，而不实际引导AngularJS到你的Web应用程序，你可以创建一个独立的注入器。

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

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

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

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

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

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

角度JS-树枝与双花括号冲突

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

如何在控制器中使用过滤器？

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

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

现在，您可以读取和写入作用域，甚至可以更好地从作用域调用函数。在这种情况下，您需要将筛选器的实例放在作用域中，如下所示：

$scope.filterInstance = $filter;

现在，您可以从任何位置调用此过滤器实例，甚至在 Angular 上下文之外： var scope = $（"path to the DOM element"）.scope（）; var result = scope.filterInstance（"xyz"）;

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

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

相关文章：