AngularJs

Question

我使用 leaflet 和 AngualrJs 来显示地图已经有一段时间了。

现在，我想增加一些复杂性并使用 ui-router 仅在一种状态下显示地图，这意味着在一个视图中，该视图具有关联的控制器。但是地图不显示，开发者控制台也没有报错。

我创建了最简单的 Plunker here. It has two states, Alpha & Beta, each with a link to toggle to the other state. In the view of state Beta, there is also the 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%;    
}

Answer 1

在 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="leaflet@0.7.3"
        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="leaflet@0.7.x"
        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>

和 ui-app.js 上的路由器：

var app = angular.module('app', [
    'ui-leaflet', 'ui.router'
]);

Demo

AngularJs - 在 ui-router 视图中看不到传单地图

AngularJs - can't see a leaflet map in a ui-router view

leaflet

angular-ui-router

angular-leaflet-directive