Я пытаюсь отобразить несколько 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) {
}]);
Используйте эту директиву для автоматической загрузки приложения 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>
ngCesium
и myApp
. В каждом из модулей у вас будет куча контроллеров, директив, сервисов и тому подобного. Оба модуля используют одну и ту же HTML-страницу. Как каждому модулю узнать, на какую часть HTML он может работать, а на что нет? {{variable}}
будет отслеживаться обоими модулями. Это приводит к конфликту ... По сути, то, что вы пытаетесь сделать, не работает.
angular.bootstrap
их, используя вместо этогоangular.bootstrap
» docs