Question

我是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=not%20a%20function%2C%20got%20undefined https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js 第83行

我正在使用角度js版本1.2.5 ...

Answer 1

你有两个模块，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;
});

或将myapp2模块注入myapp模块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";
} );

Answer 2

您正在创建两个不同的角度模块，每个都有一个控制器，而不是 一个带有两个不同控制器的模块 ，这就是你想做的，只需更改你的代码以符合这种语法：

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) {
    // ...
});

Answer 3

这里有两个问题。

一，是你已经定义了两个不同的模块：“myapp”和“myapp1”。也许这只是一个错字，你的意思是他们是一样的。

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

angular.module("myapp", [])

这是一个模块 setter 。

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

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

Answer 4

下面会有用。您必须记住的是，每次定义新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']);

即使控制器可用，Angular JS也会抛出错误

4 个答案: