Question

使用Typescript创建我的模块：

angular.module('admin', ['ngMessages'])
    .service('homeService', HomeService)
    .controller('adminHomeController', AdminHomeController)
    .controller('adminContentController', AdminContentController)
    .filter('sdate', function ($filter) {
        var angularDateFilter = $filter('date');
        return function (theDate) {
            return angularDateFilter(theDate, 'yyyy-MM-dd');
        }
    });

在我的HTML页面上，我引用了这样的过滤器：

{{ row.createdDate | sdate }}

但它给了我这个错误：

Error: [$injector:unpr] Unknown provider: nProvider <- n <- sdateFilter
http://errors.angularjs.org/1.3.0-beta.8/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-<div data-ui-view="content" id="contentBlock" class="ng-scope">dateFilter
    at http://127.0.0.1:17316/Scripts/bundle/library.js:80:20
    at http://127.0.0.1:17316/Scripts/bundle/library.js:3837:27
    at Object.getService [as get] (http://127.0.0.1:17316/Scripts/bundle/library.js:3969:53)
    at http://127.0.0.1:17316/Scripts/bundle/library.js:3842:53
    at getService (http://127.0.0.1:17316/Scripts/bundle/library.js:3969:53)
    at Object.invoke (http://127.0.0.1:17316/Scripts/bundle/library.js:4001:25)
    at http://127.0.0.1:17316/Scripts/bundle/library.js:3843:45
    at Object.getService [as get] (http://127.0.0.1:17316/Scripts/bundle/library.js:3969:53)
    at null.$filter (http://127.0.0.1:17316/Scripts/bundle/library.js:14624:34)
    at Parser.filter (http://127.0.0.1:17316/Scripts/bundle/library.js:10627:27)

然后我尝试这样做：

var app = angular.module('app',
    [
        'access',
        'admin',
        'authentication',
        'ngMessages',
        'ui.router'
    ])
    .controller('appController', AppController)
    .filter('sdate', function ($filter) {
        var angularDateFilter = $filter('date');
        return function (theDate) {
            return angularDateFilter(theDate, 'yyyy-MM-dd');
        }
    })

我仍然得到同样的错误。注册过滤器的方式有问题吗？

Answer 1

当你看到类似这样的东西时

Error: [$injector:unpr] Unknown provider: nProvider <- n <- sdateFilter

它通常意味着一个函数参数表示某个依赖项被某种JavaScript编译器压缩为单个字母（closure，uglify等等等。）

sdateFilter已正确解析。 Angular表示sdateFilter取决于n n <- sdateFilter。下一部分nProvider <- n表示Angular尝试找到名为n的提供程序。

那么sdateFilter有什么依赖？那么你正在尝试注入$filter以便它是唯一的依赖项，并且某些内容已将其重命名为字母n。

您可以使用数组通知来定义依赖项来解决此问题。这将按函数参数的顺序将依赖项列为字符串。即使参数名称不匹配，Angular也会使用它。

angular.module('admin', ['ngMessages'])
    .service('homeService', HomeService)
    .controller('adminHomeController', AdminHomeController)
    .controller('adminContentController', AdminContentController)
    .filter('sdate', ['$filter',function ($filter) {
        var angularDateFilter = $filter('date');
        return function (theDate) {
            return angularDateFilter(theDate, 'yyyy-MM-dd');
        }
    }]);

一旦开始使用数组表示法，您可以调用任何参数。

实施例

    .filter('sdate', ['$filter',function (n) {
        var angularDateFilter = n('date');
        return function (theDate) {
            return angularDateFilter(theDate, 'yyyy-MM-dd');
        }
    }]);

另请参阅：Angular Injector

如何在AngularJS中注册过滤器？

1 个答案: