Невозможно отобразить несколько приложений ng

0

Я пытаюсь отобразить несколько ng-приложений на одной странице, но не все из них будут отображаться одновременно. Для жизни меня я не могу понять, почему отображается только один, когда я устанавливаю 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) {

    }]);
  • 2
    «Только одно приложение AngularJS может быть автоматически загружено для каждого документа HTML ... ... Чтобы запустить несколько приложений в документе HTML, вы должны вручную angular.bootstrap их, используя вместо этого angular.bootstrap » docs
  • 0
    это решение или обходной путь для исправления этого? Используйте мой пример, чтобы показать, пожалуйста.
Теги:
cesium

1 ответ

3
Лучший ответ

Используйте эту директиву для автоматической загрузки приложения AngularJS. Директива ngApp обозначает корневой элемент приложения и обычно располагается рядом с корневым элементом страницы - например, в теге или тегах.

Только одно приложение AngularJS может автоматически загружаться в HTML-документ. Первый ngApp, найденный в документе, будет использоваться для определения корневого элемента для автоматической загрузки в качестве приложения. Чтобы запустить несколько приложений в документе HTML, вы должны вручную angular.bootstrap их с помощью angular.bootstrap. Приложения AngularJS не могут быть вложены друг в друга.

Прямо от угловых документов.

Вместо модулей используйте отдельные контроллеры. Затем эти контроллеры можно разместить на разных разделах вашего 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>
  • 0
    спасибо за ответ, и я пытаюсь высмеять это, но я все еще не понимаю этого.
  • 0
    Скажем так: у вас есть 2 модуля: ngCesium и myApp . В каждом из модулей у вас будет куча контроллеров, директив, сервисов и тому подобного. Оба модуля используют одну и ту же HTML-страницу. Как каждому модулю узнать, на какую часть HTML он может работать, а на что нет? {{variable}} будет отслеживаться обоими модулями. Это приводит к конфликту ... По сути, то, что вы пытаетесь сделать, не работает.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню