即使控制器可用，角度JS仍会出现错误

Angular JS thowing error even though controller is available

本文关键字：错误 JS 角度 控制器      更新时间：2023-09-26

我是Angular JS的新手，我正在尝试一些例子。。。但当我尝试加载我的应用程序时，我遇到了一个非常奇怪的异常。。。

这是我的角JS代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
        <script src="JS/Controllers.js"></script>
    <body ng-app="myapp">
            <div ng-controller="HelloController">
                <h2>Hello {{helloTo.title}} !</h2>
            </div>
            <div ng-controller="MyController" >
                <span ng-show="myData.showIt"></span>
                <span ng-hide="myData.showIt"></span>
            </div>
        </body>

这是我的控制器代码：

angular.module("myapp", []).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );
angular.module("myapp1", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

firebug记录的错误：错误：[ng:areq]http://errors.angularjs.org/1.2.5/ng/areq?p0=MyController&p1=不是%20a%20函数%2C%20得到%20未定义https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js83号线

我使用的是angular js 1.2.5版本…

您正在创建两个不同的角度模块，每个模块有一个控制器，而不是一个带有两个不同控制器的单个模块

angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        // ...
    })
    .controller("MyController", function($scope) {
        // ...
    });

或者这个：

var myApp = angular.module("myapp", []);
myApp.controller("HelloController", function($scope) {
    // ...
});
myApp.controller("MyController", function($scope) {
    // ...
});

您有两个模块，myapp和myapp2。myapp2有一个控制器MyController，您正试图在myapp模块的范围内使用它，这是不可能的。

您可以在myapp模块中定义MyController。http://jsfiddle.net/g35tpy5q/1/

var myapp=angular.module("myapp", []);
myapp.controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );
myapp.controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

或者在myapp模块中注入myapp2模块http://jsfiddle.net/g35tpy5q/2/

angular.module("myapp2", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});
angular.module("myapp", ["myapp2"]).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

这里有两个问题。

第一，您定义了两个不同的模块："myapp"answers"myapp1"。也许这只是一个拼写错误，而你的意思是让它们是一样的。

然后，第二个问题是，当您第二次使用[]时，您正在重新定义您的模块：

angular.module("myapp", [])

这是一个模块设置器。

相反，使用不带[]:的模块getter

angular.module("myapp").controller("MyController", ...)

以下内容将起作用。你必须记住的是，每次你定义一个新的angular.module，如果你放了angular.module('myapp', [])，你就是在定义一个不知道任何其他模块的新空间。如果随后执行angular.module('myapp').controller()，则会将控制器连接到原始模块。因此在其范围内。

在定义控制器时，请注意[]的调试。[]用于依赖注入，但就angular.module而言，它定义了一个全新的模块空间。

下面是一种实际正确地模化角度js的方法。

angular.module("myapp.hello", []).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );
angular.module("myapp.my", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});
angular.module("myapp", [
    'myapp.hello',
    'myapp.my']);
相关文章：