8

你如何为 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>
4

2 回答 2

5

同一个文档中不能有超过 1 个ng-app指令。您需要手动引导另一个。否则，只有第一个实例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>

于 2015-01-15T02:38:20.663 回答
0

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

于 2015-04-15T06:52:24.727 回答