Я уже некоторое время использую листовку с Angualr Js, чтобы показывать карты.
Теперь я хочу добавить некоторую сложность и использовать ui-router, чтобы отображать карту только в одном состоянии. , что означает в одном представлении, который имеет связанный контроллер. Однако карта не отображается, и в консоли разработчика отсутствуют сообщения об ошибках.
Я создал самый простой из возможных Plunker здесь . Он имеет два состояния: альфа и бета, каждое из которых имеет ссылку для переключения в другое состояние. В представлении состояния бета-версии также существует простейшая карта листовок , но, как я уже сказал, она не отображает и не отображает никаких ошибок. Я добавил красную рамку вокруг него в CSS.
Что я делаю неправильно?
Полный код приведен ниже, но вам, возможно, будет проще играть с Plunker.
index. html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="styleSheet" href="styles.css" />
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="application/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="application/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script type="application/javascript"
src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script type="application/javascript" src="app.js"></script>
<script type="application/javascript" src="controllers.js"></script>
</head>
<body ui-view></body>
</html>
app. js
angular.module('app', [
'ui.router'
]);
angular.module('app').config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/alpha');
$stateProvider.state('alpha', {
url: '/alpha',
templateUrl: './alpha.html',
controller: 'alphaController'
});
$stateProvider.state('beta', {
url: '/beta',
templateUrl: './beta.html',
controller: 'betaController'
});
}
]);
контроллеры. js
angular.module('app').controller('alphaController', ['$state',
function ($state) {
}
]);
angular.module('app').controller('betaController', ['$state',
function ($state) {
}
]);
alpha. html
<h1>Alpha</h1>
<a ui-sref="beta" ui-sref-active="beta">Beta</a>
beta. html
<h1>Beta</h1>
<a ui-sref="alpha" ui-sref-active="alpha">Alpha</a>
<hr>
<!-- see https://angular-ui.github.io/ui-leaflet/#!/examples/simple-map -->
<leaflet id="map-simple-map" class="map_div red_border"></leaflet>
стилей. css
html, body
{
height: 100%;
width: 100%;
}
.map_div
{
height: 90%;
width: 90%;
}
.red_border
{
border-width: 1%;
border-style: double;
border-color: red;
padding: 0.5%;
margin: 0.5%;
}