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

How to add multiple controller in single page in AngularJS

本文关键字：添加 控制器 单个页 AngularJS      更新时间：2023-09-26

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

因为当您执行var new= angular.module('myapp',[]);时，您正在覆盖第一个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() []第二个参数会有所不同

为了最好地定义控制器、指令、工厂等... 是

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

app.module.js 

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

对于控制器，创建单独的文件（根据您的要求，甚至可以为1个控制器创建1个文件）

一些控制器.js

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

注意：

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

类型 1（不推荐）

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

类型 2（推荐）

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

原因

因此，正如您在 TYPE2 中看到的那样，我们将控制器依赖项传递到数组中，因此当我们编译程序时，angular 会将名称命名为 eg：a 以$scope 函数（） 内部并将其视为$scope。

使用TYPE1，在定义控制器依赖关系时，您需要遵循特定的顺序，否则角度将通过错误，因为在这种方法中，角度只是将第一个依赖关系视为$rootscope，第二个依赖关系视为$scope等等。

例如：

不能像这样将依赖项传递给控制器

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

这将引发错误

如果你定义像

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

这将正常工作，因为它是 Angular 想要的顺序。

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

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

定义模块时，不要使用 var 。您可以在此处找到一些 Angular 最佳实践：Angular 风格指南/最佳实践

相关文章：