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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

T J*_*T J 11

因为你在覆盖第一个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 = "";
});

Run Code Online (Sandbox Code Playgroud)

要么

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

Run Code Online (Sandbox Code Playgroud)

[]传递的第二个参数module()有所不同

你对参数[]完全正确.但这种语法更好(不要使用var app):`angular.module("myapp",[]); angular.module("myapp").controller('cont1',function($ scope){...}); angular.module("myapp").controller('cont2',function($ scope){...});` (2认同)

归档时间：	10 年，3 月前
查看次数：	16257 次
最近记录：	7 年，6 月前