Question

我目前正在尝试了解AngularJS中的一些功能。我写了一个我尝试的代码（http://codepen.io/ssj666/pen/XbgKXX）。

我的代码：

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
   <HEAD>
   <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>   
   </HEAD>
<BODY>
  <div ng-app="test" ng-controller="testCtrl"> 
    <ul>
    <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
    </li>
    </ul>
</div>
<div ng-app="t" ng-controller="testCtrl"> 
  <ul>
    <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
    </li>
  </ul>
</div>
<div ng-app="t2" ng-controller="tCtrl"> 
  <ul>
    <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
    </li>
  </ul>
</div>

   <script>
   var app = angular.module('test', []);
     app.controller('testCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
    });
  </script>
   <script>
   var app = angular.module('t', []);
   app.controller('testCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
  });
  </script>
  <script>
  var app = angular.module('t2', []);
  app.controller('tCtrl', function($scope, $http) {
  $http.get("http://www.w3schools.com/angular/customers.php")
  .success(function (response) {$scope.names = response.records;});
  });
  </script>

  </BODY>
</HTML>

我希望没有拼写错误的一切，但如果是这样我就不会看到它。单个angularJS控制器是否可以控制具有不同ng-app-names的标签？为什么第二个控制器不能使用不同标签（具有不同的ng-app-name）的相同om范围属性？

我目前正在调查我的问题是否可能重复。

Answer 1

您需要使用一个具有不同控制器的应用，而不是使用不同的应用。看作是一个项目，你使用1个项目与不同的类，或1个项目与不同的HTML模板或任何你能想到的。应用程序是父级，控制器是其子级。控制器需要有唯一的名称！

Answer 2

除非您手动引导，否则您无法拥有多个ng-app。 Angular将采用第一个ng-app来引导所有内容。这就是为什么你在其他两个div上看不到任何东西的原因。

为什么我在附加的代码中没有获得相同的输出3次？

2 个答案: