我曾经和AngualrJs一起使用传单来显示地图。
现在，我想增加一些复杂性，并使用ui-router仅在一种状态下显示地图，这意味着在一个视图中具有关联的控制器。但是，该地图不会显示，并且开发者控制台中没有错误消息。
我创建了最简单的柱塞here。它有两个状态，即Alpha和Beta，每个状态都有一个链接可以切换到另一个状态。在状态Beta的视图中，也有simplest possible leaflet map，但是，正如我所说的，它不会显示，也不会显示任何错误。我在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'
});
}
]);
controllers.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>
styles.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%;
}
在index.html上包含leaflet.css，angular-simple-logger.js和ui-leaflet.js：
<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>
<link
data-require="[email protected]"
data-semver="0.7.3"
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"
/>
<link rel="stylesheet" href="style.css" />
<script
data-require="[email protected]"
data-semver="0.7.3"
src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.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="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.light.js"></script>
<script src="https://rawgit.com/angular-ui/ui-leaflet/67e9dc28d9880a9091cbf7d42de259440e77ada9/dist/ui-leaflet.js"></script>
和app.js上的ui路由器：
var app = angular.module('app', [
'ui-leaflet', 'ui.router'
]);