javascript AngularJS 未知提供程序 (filterProvider) 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21443702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Unknown Provider (filterProvider) error
提问by Calgar99
The two script statements below work independently however when they are combined it causes Error: [$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilterCan anyone explain why this occurs?
下面的两个脚本语句独立工作，但是当它们组合在一起时会导致错误：[$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilter谁能解释为什么会发生这种情况？
1st segement
第一段
Find Person: <input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<script>
var app = angular.module('myApp',[]);
app.filter('searchName',function(){
return function (input){
return input + '!';
}
})
</script>
2nd segement
第二段
<div ng-controller="myCtrl">
<button ng-click="myFunc()">Hello World Button</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function ($scope) {
$scope.myFunc = function () {
console.log('Hello world!');
};
});
</script>
回答by Graham TheOne
<div ng-app="myApp">
<script src="Scripts/Angular.js" type="text/javascript"></script>
Find Person:
<input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('searchName', function () {
return function (input) {
return input + '!';
};
});
</script>
<div ng-controller="myCtrl">
<button ng-click="myFunc()">
Hello World Button</button>
</div>
<script>
var app = angular.module('myApp');
app.controller('myCtrl', function ($scope) {
$scope.myFunc = function () {
console.log('Hello world!');
};
});
</script>
回答by Sreekanth
There should only be a single module intialization in your code. Fixing the repeated intialization solves the problem.
您的代码中应该只有一个模块初始化。修复重复初始化可以解决问题。
var app = angular.module('myApp', []);
Here is the documentation from the AngularJS docs.
这是来自 AngularJS 文档的文档。
"Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module"
“传递一个参数会检索现有的 angular.Module，而传递多个参数会创建一个新的 angular.Module”
You could read more about the modules here. AngularJS Modules
您可以在此处阅读有关模块的更多信息。AngularJS 模块
var app = angular.module('myApp', []);
app.filter('searchName', function() {
return function(input) {
return input + '!';
}
});
app.controller('myCtrl', function($scope) {
$scope.myFunc = function() {
console.log('Hello world!');
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
Find Person:
<input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<div ng-controller="myCtrl">
<button ng-click="myFunc()">Hello World Button</button>
</div>
</div>