页面上未显示多个ng应用程序

我正在尝试用AngularJS显示一个带有时间戳和图例的铯地球仪。然而，我只看到时间戳，其他一切都是空白的。然而，如果我注释掉并移动没有注释掉的ng应用程序，它将显示其他div，但我不能同时显示这三个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>

您可以这样使用：

<!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页面中的多个ng应用程序

相关内容

最新更新

热门标签：