Question

我是AngularJS的新手我对此代码有疑问。我想在单ng-app中添加多个控制器。但它执行第一个。为什么不是第二个？

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angul /1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-controller="cont1">
        <input type="text" ng-model="fullname">
        {{fullname}}
    </div>
    <div ng-controller="cont2">
        <input type="text" ng-model="fname">
        {{fname}}
    </div>
    <script>
        var app = angular.module("myapp", []);
        app.controller('cont1', function ($scope) {
            $scope.fullname = "";
        });
        var new = angular.module('myapp', []);
        new.controller('cont2', function ($scope) {
            $scope.fname = "";
        });
    </script>
</body>
</html>

Answer 1

因为当您执行myapp时，您将覆盖第一个var new= angular.module('myapp',[]);模块。

您的代码应为：

var app = angular.module("myapp", []);
app.controller('cont1', function($scope) {
  $scope.fullname = "";
});
app.controller('cont2', function($scope) {
  $scope.fname = "";
});

或

var app = angular.module("myapp", []);
app.controller('cont1', function($scope) {
  $scope.fullname = "";
});
angular.module("myapp").controller('cont2', function($scope) {
  $scope.fname = "";
});

传递给[]的第二个参数module()产生差异

Answer 2

以最佳方式定义控制器，指令，工厂等......

在单独的文件中定义模块名称

<强> app.module.js

angular.module("myapp",[]); // inside [] you define your module dependencies

控制器的

创建单独的文件（根据您的要求，即使您可以为1个控制器创建1个文件）

<强> some.controller.js

angular.module("myapp").controller('someCtrl'['$scope', function($scope){

}]);

angular.module("myapp").controller('someOtherCtrl'['$scope', function($scope){

}]);

注意：

您可以编写两种类型的控制器

TYPE1 （不推荐）

.controller('ctrlName', function($scope){ });

TYPE2 （推荐）

.controller('ctrlName', ['$scope', function($scope){ }]);

<强>原因

因为你可以在TYPE2中看到我们在一个数组中传递控制器依赖关系，所以当我们编译我们的程序时，angular会给出一个名称，例如：a：$ scope in scope（）并将其视为$ scope。 / p>
对于TYPE1，您需要在定义控制器依赖关系时遵循特定顺序，否则angular将通过错误，因为在这种方法中，angular只是将第一个依赖关系视为$ rootscope，第二个视为$ scope等等....

对于Eg：

您无法将依赖关系传递给您的控制器

.controller('ctrlName', function($http, $scope) { });

这会抛出错误

如果您定义类似

.controller('ctrlName', function($scope, $http) { });

这样可以很好地工作，因为它需要有角度。

Answer 3

您也可以通过这种方式在单个模块中定义多个控制器：

    angular.module("myapp",[]);
    .controller('cont1',function($scope){
      $scope.fullname="";
       });

   .controller('cont2',function($scope){
    $scope.fname="";
    });

在定义模块时，请勿使用var。您可以在此处找到一些Angular最佳做法：Angular Style Guide/Best Practices

如何在AngularJS中的单页中添加多个控制器

3 个答案: