javascript - AngularJS 1.3.8 使用多个 Controller ，第二个 Controller 不工作

Question

如何为 AngularJS 1.3.8 使用多个 Controller ？

我在下面尝试了以下操作，但只有第一个 Controller 输出正确，第二个 Controller 输出 {{ 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>

Answer 1

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

另一个问题是没有名为$scope2的提供者，您需要注入(inject)$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>

如果您打算只使用一个模块并将其他 Controller 绑定(bind)到它。然后只需要一个 ng-app 并将您的 Controller 注册到 app1。

创建模块:

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

注册 Controller :

 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>