web-dev-qa-db-ja.com

AngularJS 1.xカスタムフィルターを挿入できない、プロバイダーが不明

カスタムフィルターを作成しようとしていますが、それをコントローラーに挿入しようとすると、「不明なプロバイダー」エラーが発生します。すべての参照をチェックして再確認しましたが、何が問題なのかわかりません。

ファイルがindex.htmlで正しく参照されていることはわかっています。ファイルはロードされ、インスペクターが見つけることができます。これは私が持っているコードです：

私のapp.jsで：

angular.module('equiclass', ['equiclass.controllers',
                         'equiclass.services',
                         'ngRoute'])
.config(function ($routeProvider) {
$routeProvider
  .when('/courses', {
    templateUrl: 'views/courses.html',
    controller: 'CourseCtrl'
  // And some other stuff with routes
});

angular.module('equiclass.controllers', ['equiclass.services', 'equiclass.filters']);
angular.module('equiclass.services', []);
angular.module('equiclass.filters', []);

私のフィルター：

angular.module('equiclass.filters')
  .filter('testFilter', function() {
    return function(input) {
      return undefined;
    };
});

そしてコントローラー：

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilter) {

  });

もちろん、これはかなり単純化されていますが、機能しないだけで、理由がわかりません。私はいくつかのサービスを作りましたが、それらはすべてうまく機能し、うまく機能しています。

angularjsangularjs-filter
11
stinaq

フィルター自体を注入する必要はありません。

このコード...

_angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilter) {

  });
_

する必要があります

_angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope) {

  });
_

そして、CourseCtrlの内部では、通常どおりにフィルターを使用する必要があります。

モジュール_'equiclass.filters'_をモジュール_'equiclass.controllers'_に挿入するだけで十分です。

同様の問題があり、それについて投稿しました 私のブログに 。

-編集

n00dl が以下で言及するように、トリッキーな部分は、Angularで自動命名規則がどのように機能するかです。フィルターにspecialNumberFilterという名前を付けた場合、注入するときにspecialNumberFilterFilterとして参照する必要があります。これにより、フィルターを機能として使用できます。

// In a controller vm.data = specialNumberFilterFilter(vm.data, 'a');

しかし、たとえば、時計で評価されている文字列式で使用されている場合は、コントローラーに注入せずにフィルターを使用することもできると思います。これは、テンプレートで使用する場合のシナリオと同じであるためです。 。

// Inside a watch - no controller injection required `$scope.$watch('vm.data | specialNumberFilter', function(new, old) { ... })`

9
seangwright

コントローラ内でフィルタを使用したい場合は、コントローラに$filter属性を挿入する必要があり、次のようにアクセスできます

$filter('filtername');

のように使用できます

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}
15
BKM

Angularのドキュメントによると：

テンプレートでフィルターを使用する場合

次に、それをモジュールに挿入して、この{{ expression | filter }}または{{ expression | filter:argument1:argument2:... }}のように使用するだけです。

doc

フィルターをコントローラー、ディレクティブなどで使用したい場合：

次のように、<filterName>Filterという名前の依存関係を挿入します。

controller('MyController', ['filterFilter', function(filterFilter) {}]);

doc

この特定のケースでは：

angular.module('equiclass.controllers')
  .controller('CourseCtrl', function ($scope, testFilterFilter) {

  });
5
n00dl3

あなたがそれが本番にあるのかローカルサーバーにあるのかは言及しませんでしたが、ファイルを縮小する場合に備えて、これを試してください：

angular.module('equiclass.controllers')
  .controller('CourseCtrl', ['$scope', 'testFilter', function ($scope, testFilter) {

  }]);
2
Nuriel