javascript - 无法显示多个 ng-apps

Question

我正在尝试在同一页面上显示多个 ng-app，但并非所有应用都会同时显示。我一生都无法弄清楚为什么当我设置 ng-app 时只会显示一个

index.html

<!--timestamp-->
<div class="timeStamp" ng-app="myApp">
    <div ng-controller='TimeCtrl'>
        <p>{{ clock | date:'MM-dd-yyyy  HH:mm:ss'}}</p>
    </div>
</div>

<!--cesium-->
<div class="cesium" ng-app="ngCesium" ng-controller="appCtrl as appCtrl">
    <div cesium-directive="" id="cesium" class="cesiumContainer"></div>
</div>

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

timeAnguar.js

var module = angular.module('myApp', []);

module.controller('TimeCtrl', function($scope, $interval) {
    var tick = function() {
        $scope.clock = Date.now();
    }
    tick();
    $interval(tick, 1000);
});

cesium.js

"use strict";

angular.module('ngCesium', [])

    .directive('cesiumDirective', function ($interval) {
        return {
            restrict: "EA",
            controllerAs: "cesiumCtrl",
            scope: {
                data: "="
            },
            controller: function ($scope) {

            },
            link: function (scope, element, attr, ctrl) {

                ctrl.cesium = new Cesium.Viewer(element[0], {
                    baseLayerPicker: false,
                    fullscreenButton: true,
                    homeButton: false,
                    sceneModePicker: false,
                    selectionIndicator: false,
                    timeline: false,
                    animation: false,
                    geocoder: false,
                    infoBox: false
                });
                var longitudeCol = -76.795292;
                var latitudeCol = 39.176810;

                var longitudeSan = -117.231192;
                var latitudeSan = 33.139597;


                ctrl.cesium.camera.flyTo({
                    destination: new Cesium.Cartesian3.fromDegrees(longitudeSan, latitudeSan)
                });
                ctrl.cesium.entities.add({
                    position: new Cesium.Cartesian3.fromDegrees(longitudeCol, latitudeCol),
                    point: {
                        pixelSize: 5,
                        color: Cesium.Color.GREEN,
                        outlineColor: Cesium.Color.WHITE,
                        outlineWidth: 2
                    },
                    label: {
                        text: 'Leidos Columbia',
                        font: '12pt monospace',
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineWidth: 2,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        pixelOffset: new Cesium.Cartesian2(0, -9)
                    }
                });

                ctrl.cesium.entities.add({
                    position: new Cesium.Cartesian3.fromDegrees(longitudeSan, latitudeSan),
                    point: {
                        pixelSize: 5,
                        color: Cesium.Color.GREEN,
                        outlineColor: Cesium.Color.WHITE,
                        outlineWidth: 2
                    },
                    label: {
                        text: 'Leidos San Diego',
                        font: '12pt monospace',
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineWidth: 2,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        pixelOffset: new Cesium.Cartesian2(0, -9)
                    }
                });
                ctrl.cesium.entities.add({
                    polyline: {
                        positions: Cesium.Cartesian3.fromDegreesArray([longitudeCol, latitudeCol,
                            longitudeSan, latitudeSan]),
                        width: 1,
                        material: Cesium.Color.PURPLE
                    }

                })
            }
        };

    })

    .controller('appCtrl', ['$scope', function ($scope) {

    }]);

Answer 1

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags.

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

直接来自angular docs .

使用单独的 Controller 代替模块。然后可以将这些 Controller 放置在 HTML 的不同部分:

<html ng-app="myApp">
  <body>
    <div class="section_one" ng-controller="myAppController">
      myApp stuff here
    </div>
    <div class="section_one" ng-controller="ngCesiumController">
      Cesium stuff here
    </div>
  </body>
</html>