Question

我正在尝试在AngularJS中显示带有时间戳和图例的铯地球仪。但是我只看到时间戳，其他一切都是空白的，但是如果我注释掉并移动了什么ng-app没有注释掉它会显示其他div但我不能让所有三个显示在同一时间：

<div class="timeStamp" ng-app="myApp">
    <div ng-controller='TimeCtrl'>
        <p>{{ clock | date:'MM-dd-yyyy  HH:mm:ss'}}</p>
    </div>
</div>
<div class="cesium" ng-app="ngCesium" ng-controller="appCtrl as appCtrl">
    <div cesium-directive="" id="cesium" class="cesiumContainer"></div>
</div>
<div ng-app="" class="categoryBox" data-ng-init="planes=['Commercial Planes','Private Planes']">
    Legend
    <li data-ng-repeat="x in planes" ng-style="{ background: x == 'Commercial Planes' ? 'red' : 'blue' }">
        {{x}}
    </li>

</div>

Answer 1

您可以这样使用：

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="angular.ng-modules.js"></script>
  <script>
  var moduleA = angular.module("MyModuleA", []);
  moduleA.controller("MyControllerA", function($scope) {
    $scope.name = "Bob A";
  });

  var moduleB = angular.module("MyModuleB", []);
  moduleB.controller("MyControllerB", function($scope) {
    $scope.name = "Steve B";
  });
  </script>
</head>
<body>
  <div ng-modules="MyModuleA, MyModuleB">
    <h1>Module A, B</h1>
    <div ng-controller="MyControllerA">
      {{name}}
    </div>
    <div ng-controller="MyControllerB">
      {{name}}
    </div>
  </div>

  <div ng-module="MyModuleB">
    <h1>Just Module B</h1>
    <div ng-controller="MyControllerB">
      {{name}}
    </div>
  </div>
</body>
</html>

请参阅以下网址，它对您有所帮助：

AngularJS Multiple ng-app within a page

多个ng-app未在页面上显示

1 个答案: