Question

这看起来应该很简单，但我找不到文档。我想知道如何使Angular组件（让我们说一个过滤器）可以在不同的应用程序中重用。我已经制作了一个简单的过滤器来格式化电话号码，我希望能够在任何应用程序中使用它。目前声明如下：

var myModule = angular.module('myModule', ['ngSanitize']);

myModule.filter('formatFilter', function() {
  return function(input) {
    return input.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
  }
});

问题是如何使这个过滤器可重用。现在它只是附加到'myModule'，但我怎么能把它从这个文件中删除所以我可以在其他地方重复使用它？

Answer 1

您可以通过将过滤器封装在单独的模块中来启动。对于其他应用程序来说，这些应用程序只需要包含过滤器的源代码并声明对模块的依赖性：

angular.module('myApp',['myModule'])

您可能希望将过滤器保持模块重命名为更有意义的内容，例如phoneFormatter或某事。

Answer 2

仅作为一个例子：

这是一个声明为模块的可重用过滤器，因此只需要在app上注入：

过滤器：

angular.module("lov-filter", []).filter('StartOnPage', function () {
    return function (input, start) {
        start = +start;
        return input.slice(start);
    }
});

应用：

var demoApp = angular.module（＆＃39; demoApp＆＃39;，[＆＃39; lov-filter＆＃39;]） .config（function（）{
});

在此角度指令上使用：https://github.com/rolandocc/lov-angular-directive

如何制作可重用的AngularJs组件

2 个答案: