Question

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

<!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>

Answer 1

@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>

Answer 2

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

If you have multiple apps in a page you have to do manual bootstrapping

使用通过模块定义的多个控制器不起作用

2 个答案: