Question

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

Answer 1

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

Answer 2

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

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

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

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

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

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

Answer 3

我不确定你在做什么是非常值得的。我想知道更改Angular的开始和结束符号是否可以完全解决您的问题，因此您可以直接在Html中使用过滤器：

AngularJS-Twig conflict with double curly braces

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

How to use a filter in a controller?

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

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

现在您可以读取和写入范围，甚至可以更好地从范围调用函数。在这种情况下，您需要将过滤器的实例放在范围内，如下所示：

$scope.filterInstance = $filter;

现在您可以从角度上下文之外的任何位置调用此过滤器实例： var scope = $（“DOM元素的路径”）。scope（）; var result = scope.filterInstance（“xyz”）;

Answer 4

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

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

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

4 个答案: