创建封装有角js特性的实用模块

Hi I need pointers to understand on how to create a utility module encapsulating angular js filters so that I can pass the input value(2014-11-14T22:51:04.635Z) to be formatted and get the formatted(ng-filter : 14 Nov 2014 - 02:51 PM) output from it. The goal is to utilize angular Js filter property independent of the frontend framework. Frameworks such as mustache have {{ }} tags in html, which angular also have, this can cause issues when ng-filters directly used inside the html file. So I am trying to make use of ngFilters without including them in the html. So the goal is to accept values from the template, format them in JS file using ngFilters and push the value back to the template.

你好，我需要指针来理解如何创建一个封装有角js过滤器的实用模块，这样我就可以将要格式化的输入值(2014-11-14T22:51:04.635Z)传递给它，并从中获得格式化的(ng-filter: 2014年11月14日- 02:51 PM)输出。目的是利用角Js滤波器的性质独立于前端框架。mustache等框架在html中有{{{{}}标签，这也是有棱角的，这可能会在html文件中直接使用ng-filter时引起问题。因此，我试图使用ngfilter，而不将它们包含在html中。因此，目标是接受模板中的值，使用ngFilters将它们格式化为JS文件，并将值推回模板。

4 个解决方案

#1

You can call $filter in javascript easily:

在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);

If you want to transform a array, you can use .map

如果要转换数组，可以使用.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);
});

To find out more about the date filter in angular: https://docs.angularjs.org/api/ng/filter/date

要了解更多有关角度的日期过滤器:https://docs.angularjs.org/api/ng/filter/date

#2

If you want to access some AngularJS features without actually bootstrapping AngularJS to your web-app, you can just create a stand-alone injector.

如果您想访问一些AngularJS特性，而实际上没有引导AngularJS到您的web应用程序，您可以创建一个独立的注入器。

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

You can then retrieve the $filter service from it

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

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

and have access to any of the default AngularJS filters

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

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

#3

I am not really sure what you are doing is really worth the effort. I was wondering if changing the Angular's start and ending symbols can fix your issue altogether so you can use filters directly inside Html:

我不知道你在做什么真的很值得。我想知道改变角的开始和结束符号是否可以完全解决您的问题，以便您可以在Html中直接使用过滤器:

AngularJS-Twig conflict with double curly braces

使用双花括号的AngularJS-Twig冲突

There are some cases you need to manually call specific filters in javascript. You can do this using $filter that needs to be injected by Angular before you use it:

有些情况下，您需要在javascript中手动调用特定的过滤器。你可以使用$filter，在使用它之前需要通过角注入:

How to use a filter in a controller?

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

Now I hope you don't need this or better put don't use this in normal angular applications, but in very rare situations you might need to access angular functionality (like $filter) inside a non angular context. In these situations you can access $scope for elements using the following:

现在我希望你不需要这个或者最好不要在正常的角应用中使用这个，但是在非常罕见的情况下，你可能需要在非角上下文中访问角功能(比如$filter)。在这些情况下，您可以使用以下方法访问元素的$scope:

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

Now you can read and write into scope and even better call functions from scope. In this case, you need to put an instance of your filter in the scope like this:

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

$scope.filterInstance = $filter;

now you can call this filter instance from any where even outside of the angular context: var scope = $("path to the DOM element").scope(); var result = scope.filterInstance("xyz");

现在，您可以从任何角度上下文之外调用这个过滤器实例:var scope = $(“到DOM元素的路径”).scope();var = scope.filterInstance结果(“xyz”);

#4

If you want to format dates then use http://momentjs.com/

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

That's what I use even in the Angular framework.

这就是我在角度框架中用到的。

#1