无法显示多个 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。

使用单独的控制器代替模块。然后可以将这些控制器放置在 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>

无法显示多个 ng-apps

Unable to get multiple ng-apps to show

javascript

angularjs

cesium