AngularJS 1.3.8 使用多个控制器，第二个控制器不起作用答案

【问题标题】：AngularJS 1.3.8 Using multiple controllers, second controller is not workingAngularJS 1.3.8 使用多个控制器，第二个控制器不起作用
【发布时间】：2015-03-13 09:39:55
【问题描述】：

如何为 AngularJS 1.3.8 使用多个控制器？

我尝试了以下方法，但只有第一个控制器输出正确，第二个控制器输出 {{ name }} 和 {{ age }}。

HTML：

<div ng-app="app" ng-controller="Ctrl">
    <label>Name:</label>
        <input ng-model="name">
    <label>Age:</label>
        <input ng-model="age">
    <h1>{{ name }}</h1>
    <h1>{{ age * 2 }}</h1>
</div>

<div ng-app="app2" ng-controller="Ctrl2">
    <label>Name:</label>
        <input ng-model="name">
    <label>Age:</label>
        <input ng-model="age">
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
</div>

<script>
    angular.module('app', [])
        .controller('Ctrl', ['$scope', function($scope) {
            $scope.name = "Jason";
            $scope.age = "21";
            $scope.$watch('name', function(){ // Logs the amount of times name changes
               console.log($scope.name);
            });
        }]);
</script>

<script>
    angular.module('app2', [])
        .controller('Ctrl2', ['$scope', function($scope) {
            $scope.name = "John";
            $scope.age = "22";
        }]);
</script>

【问题讨论】：

标签： javascript angularjs angularjs-controller angularjs-bootstrap

【解决方案1】：

为什么不为 1 个应用程序定义 2 个控制器？

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-app="myApp" >

<p>Person</p>

<div ng-controller="myCtrl">
First name <input type="text" ng-model="firstName"><br>
Last name <input type="text" ng-model="lastName"><br>
Birthday <input type="date" ng-model="birthday"><br>
{{firstName+' '+lastName}} was born on {{birthday}}
		
</div>

<div ng-controller="myCtrl2" ng-init="">

<p>The third result is {{ points[2] }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
    $scope.birthday= new Date();
});
app.controller('myCtrl2', function($scope) {
    $scope.points=[1,15,19,2,40];
});
</script>

</body>
</html>

【讨论】：

【解决方案2】：

同一文档中不能有超过 1 个 ng-app 指令。您需要 manually bootstrap 另一个。否则，只有 ng-app 的第一个实例会被 angular 自动引导。

另一个问题是没有名为$scope2的提供者，你需要注入$scope。

例子：-

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <label>Name:</label>
  <input ng-model="name">
  <label>Age:</label>
  <input ng-model="age">
  <h1>{{ name }}</h1>
  <h1>{{ age * 2 }}</h1>
</div>

<div id="app2" ng-controller="Ctrl2">
  <label>Name:</label>
  <input ng-model="name">
  <label>Age:</label>
  <input ng-model="age">
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
</div>

<script>
  angular.module('app', [])
    .controller('Ctrl', ['$scope',
      function($scope) {
        $scope.name = "Jason";
        $scope.age = "21";
        $scope.$watch('name', function() { // Logs the amount of times name changes
          console.log($scope.name);
        });
      }
    ]);
</script>

<script>
  angular.module('app2', [])
    .controller('Ctrl2', ['$scope',
      function($scope) {
        $scope.name = "John";
        $scope.age = "22";
      }
    ]);
  angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('app2'), ['app2']);
  });
</script>

演示

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <label>Name:</label>
  <input ng-model="name">
  <label>Age:</label>
  <input ng-model="age">
  <h1>{{ name }}</h1>
  <h1>{{ age * 2 }}</h1>
</div>

<div id="app2" ng-controller="Ctrl2">
  <label>Name:</label>
  <input ng-model="name">
  <label>Age:</label>
  <input ng-model="age">
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
</div>

<script>
  angular.module('app', [])
    .controller('Ctrl', ['$scope',
      function($scope) {
        $scope.name = "Jason";
        $scope.age = "21";
        $scope.$watch('name', function() { // Logs the amount of times name changes
          console.log($scope.name);
        });
      }
    ]);
</script>

<script>
  angular.module('app2', [])
    .controller('Ctrl2', ['$scope',
      function($scope) {
        $scope.name = "John";
        $scope.age = "22";
      }
    ]);
  angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('app2'), ['app2']);
  });
</script>

如果您打算只使用一个模块并将其他控制器绑定到它。然后只需拥有一个ng-app 并将您的控制器注册到app1。

创建一个模块：

 angular.module('app', []);

注册一个控制器：

 angular.module('app').controller('Ctrl1', ctor);

演示

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Ctrl">
    <label>Name:</label>
    <input ng-model="name">
    <label>Age:</label>
    <input ng-model="age">
    <h1>{{ name }}</h1>
    <h1>{{ age * 2 }}</h1>
  </div>

  <div ng-controller="Ctrl2">
    <label>Name:</label>
    <input ng-model="name">
    <label>Age:</label>
    <input ng-model="age">
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
  </div>
</div>
<script>
  angular.module('app', [])
    .controller('Ctrl', ['$scope',
      function($scope) {
        $scope.name = "Jason";
        $scope.age = "21";
        $scope.$watch('name', function() { // Logs the amount of times name changes
          console.log($scope.name);
        });
      }
    ]).controller('Ctrl2', ['$scope',
      function($scope) {
        $scope.name = "John";
        $scope.age = "22";
      }
    ]);;
</script>

【讨论】：

是的，$scope2 是一个拼写错误，试图弄清楚如何使它工作。如果只使用一个ng-app，您将如何将控制器注册到app1？
你错过了我的第二个演示吗？如果你展开它，你将能够看到代码
谢谢，一秒钟前没看到。感谢您提供两种不同的解决方案。干杯。