6

将控制器定义为全局函数时，一切正常。但是当使用模块来声明和“分配”控制器时，只有第一个控制器用于解析绑定。我错过了什么？

<!doctype html>
<html>
<head/>
<body>
  <div ng-app="flintstones">
    <div ng-controller="flintstoneCtrl">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </div>
  <div ng-app="rumbles">
    <div ng-controller="rumbleCtrl">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>

  var flintstones = angular.module("flintstones", []);
  flintstones.controller("flintstoneCtrl", function flintstoneCtrl($scope) {
    $scope.yourName = "Fred";
  });

  var rumbles = angular.module("rumbles", []);
  rumbles.controller("rumbleCtrl", function rumbleCtrl($scope) {
    $scope.yourName = "Barney";
  });

</script>

</html>
4

2 回答 2

12

@Arun 是正确的。但是，在您的情况下，我猜您并不想两次引导 Angular，而只是使用在不同模块中定义的控制器。

这通常是通过拥有一个页面/站点模块来完成的，该模块依赖于所需的所有模块，在您的情况下flintstones和rumbles.

angular.module('flintstones', []).controller('flintstoneCtrl', ...);
angular.module('rumbles', []).controller('rumbleCtrl', ...);

// Create a module with dependencies.
angular.module('myApp', ['flintstones', 'rumbles'])...

然后，在您的 html 中，您只需使用ng-app="myApp"该模块中的内容和它的所有依赖项即可访问。

<html ng-app="myApp">
  <body>
    <div ng-controller="flintstoneCtrl">...</div>
    <div ng-controller="rumbleCtrl">...</div>
  </body>
</html>
于 2013-04-18T12:34:36.990 回答
6

我认为，一页ng-app默认只能有一个，在您的情况下，您有两个ng-app定义。

如果您在一个页面中有多个应用程序，则必须进行手动引导

于 2013-04-18T10:14:16.317 回答