创建封装angular js特性的实用程序模块

Question

嗨，我需要一些指针来理解如何创建一个封装angular js过滤器的实用程序模块，以便我可以传递要格式化的输入值( 2014 -11-14T22:51:04.635Z)，并从中获得格式化的(ng-filter: 14 11月2014- 02:51 PM)输出。目标是利用独立于前端框架的angular Js过滤器属性。mustache等框架在html中有{{ }}个标签，angular也有，这可能会导致在html文件中直接使用ng-filter时出现问题。因此，我尝试使用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);
});

要在angular中查找有关date过滤器的更多信息：https://docs.angularjs.org/api/ng/filter/date

Answer 2

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

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

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

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

并可以访问任何默认的AngularJS筛选器

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

Answer 3

我真的不确定你正在做的事情是否真的值得你去努力。我想知道更改角度的开始和结束符号是否可以完全解决您的问题，这样您就可以直接在Html中使用过滤器：

AngularJS-Twig conflict with double curly braces

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

How to use a filter in a controller?

现在我希望你不需要这个，或者最好不要在普通的angular应用程序中使用这个，但在非常罕见的情况下，你可能需要在非angular上下文中访问angular功能(比如$filter)。在这些情况下，您可以使用以下内容访问元素的$scope：

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

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

$scope.filterInstance = $filter;

现在您可以从任何地方调用这个过滤器实例，甚至可以在angular上下文之外调用: var scope =$(“DOM元素的路径”).scope()；var result = scope.filterInstance("xyz")；