cung cấp Unknown cho bộ lọc tùy chỉnh Ionic/AngularJS

Question

Tôi đang cố gắng để thực hiện một bộ lọc tùy chỉnh, nhưng tôi nhận được lỗi sau:

Error: [$injector:unpr] Unknown provider: removeCharsFilterProvider <- removeCharsFilter

Cấu trúc của dự án của tôi là như sau ...

app.js:

var app = angular.module('myApp', ['ionic']) 

myController.js:

app.controller('myController', ['$scope', 'removeChars', 
    function($scope, removeChars) { 
    //... 
    } 
]); 

removeCharsFilter.js:

app.filter('removeChars', function() { 
    return function(input) { 
    return input.replace(/-/g, '').replace(/>/g, ''); 
    }; 
}); 

myView.html:

<div ng-controller="myController"> 
<p>{{person.name | removeChars}}</p> 
</div> 

index.html

<!-- your app's js --> 
<script src="js/app.js"></script> 

<!-- filters --> 
<script src="js/filters/removeCharsFilter.js"></script> 

<!-- controllers --> 
<script src="js/controllers/myController.js"></script> 

Tôi không có ý tưởng tại sao điều này xảy ra, Theo như tôi biết điều này là phải làm việc. Bạn có thể thấy bất cứ điều gì tôi đang thiếu?

Answer 1

Trước hết, bạn không cần phải tiêm bộ lọc trong bộ điều khiển, Chúng là một phần của ứng dụng chính và có thể được sử dụng bằng dịch vụ $filter trong bất kỳ bộ điều khiển nào.

Filters are not independent singleton objects hence no need to include as a dependency.

Vì bạn đã thêm nó vào bộ điều khiển, nó đang tìm kiếm dịch vụ hoặc nhà máy đơn lẻ và do đó cần phải tiêm. nhưng trong trường hợp của bạn, bạn có một bộ lọc, không phải dịch vụ.

Trước hết, hãy xóa removeChars khỏi bộ điều khiển. nó cho bạn lỗi $ injector vì nó đang tìm kiếm dịch vụ hoặc nhà máy không có ở đó. Sử dụng cách bleow nếu bạn muốn sử dụng bộ lọc trong bộ điều khiển.

app.controller('myController', ['$scope', '$filter', 
    function($scope, $filter) { 
    //use it like below if you want to perform filters on data in controller 
    $scope.someData = $filter('removeChars')(data); 

    } 
]); 

Nếu bạn muốn sử dụng bộ lọc trong chế độ xem, không cần quản lý sự phụ thuộc của nó, trực tiếp sử dụng trong chế độ xem như cách bạn đang sử dụng.

Do đó kết luận là,

1. lọc không thể được nạp như phụ thuộc cho bộ điều khiển vì chúng là không singleton.

2. Lọc thể được sử dụng trong bộ điều khiển sử dụng bộ lọc $

3. Theo quan điểm, họ có thể áp dụng trên dữ liệu trực tiếp sử dụng | ống tách

Hope this helps!

Answer 2

Bạn đã có lỗi này vì bạn đang sử dụng $ phun trong một cách sai lầm, theo D.I. documentation of AngularJS khi bạn cần cho một bộ lọc bên ngoài khỏi tầm nhìn, bạn phải gắn Lọc hậu tố vào sự phụ thuộc của bạn, điều này nói với $ injector rằng bạn cần một bộ lọc!

angular.module('test', []).controller('TestCtrl', function(dateFilter) { console.log('DateFilter is', dateFilter); }); 

Một cách khác để $ tiêm một bộ lọc, như mô tả trong các ý kiến ​​trước đó, là để yêu cầu bộ lọc của bạn đến $ lọc dịch vụ.