AngularJS未知提供者（filterProvider）错误

Question

下面的两个脚本语句单独运行时可以正常工作，但当它们合并在一起时，会导致错误：[$injector:unpr]未知提供者：searchNameFilterProvider < - searchNameFilter，有人能解释一下这是为什么吗？

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>

- Calgar99

---

什么意思合并？您是创建了两个同名的模块吗？ - elclanrs

我将这两个段落都放在了一个HTML文件中。是的，我确实创建了两个同名的模块。 - Calgar99

那一定是问题所在，我认为你不能给两个模块取相同的名称。尝试使用不同的名称。如果一个模块依赖于另一个模块，则将其作为依赖项传递。 - elclanrs

你的意思是像这样 var appOne = angular.module('myApp',[]); 和 var appTwo = angular.module('myApp',[]); 吗？我尝试过了，但没有成功。 - Calgar99

这些是不同的变量名，但是指向相同的Angular模块 myApp。创建两个不同的模块。空数组是用来传递依赖到其他模块的地方。请参考这里http://docs.angularjs.org/guide/module - elclanrs

Answer 1

你的代码中应该只有一个模块初始化。修复重复初始化的问题可以解决这个问题。

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

这是来自AngularJS文档的说明。

"传递一个参数将检索现有的angular.Module，而传递多个参数将创建一个新的angular.Module"

您可以在此处阅读有关模块的更多信息。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>

- Sreekanth

Answer 2

<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>

- Graham TheOne