文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJs -在ui-路由器视图中看不到传单地图。

问AngularJs -在ui-路由器视图中看不到传单地图。
EN

Stack Overflow用户

提问于 2020-04-10 18:40:42

回答 1查看 243关注 0票数 0

有一段时间，我用传单和安圭拉人一起展示地图。

现在，我想增加一些复杂性，并使用ui路由器只在一种状态下显示映射，这意味着在一个视图中，它有一个相关的控制器。但是，映射不显示，开发人员控制台中也没有错误消息。

我已经创建了最简单的柱塞这里。它有两个状态，Alpha和Beta，每个状态都有一个切换到另一个状态的链接。在状态Beta的视图中，也有最简单的传单地图，但是，正如我所说，它不显示，也不显示任何错误。我在CSS中在它周围添加了一个红色边框。

我做错什么了？

完整的代码如下，但您可能会发现它更容易玩柱塞。

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%;    
}

angularjs

angular-ui-router

leaflet

angular-leaflet-directive

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-10 20:22:13

包括leaflet.css、angular-simple-logger.js和ui-leaflet.js on index.html：

<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>

和app.js上的ui路由器

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

演示

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61146646

复制

相似问题

问AngularJs -在ui-路由器视图中看不到传单地图。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs -在ui-路由器视图中看不到传单地图。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs -在ui-路由器视图中看不到传单地图。
EN