AngularJS 1.3.8 使用多个控制器，第二个控制器不工作

Question

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>

Answer 1

同一文档中的 ng-app 指令不能超过 1 个。您需要 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>

Answer 2

为什么不为 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>

AngularJS 1.3.8 使用多个控制器，第二个控制器不工作

AngularJS 1.3.8 Using multiple controllers, second controller is not working

javascript

angularjs

angularjs-controller

angularjs-bootstrap