Question

我正在使用angular-leaflet-directive在我的应用中创建自定义地图。我能够在我的ng-view中获得一个简单的映射，但是当我使用.extend时，我得到的app.extend不是我的控制台日志中的一个函数。下面是我的地图控制器。

var app = angular.module('myApp', ['ngRoute', 'nemLogging', 'leaflet-directive']);
app.controller('HomeController',['$scope', function($scope) {
app.extend($scope, {
    center: {
        lat: 44.97,
        lng: 93,
        zoom: 15
    }
});
}]);

这是我的html，其中将附加地图。这将在我的ng-view中。

<body ng-controller='HomeController'>

<leaflet center="center" width="100%" height="480"></leaflet>

</body>

这是我的主要索引文件，我在这里找到并创建我的ng-view。

<!DOCTYPE html>
<html lang="en" ng-app="myApp" class="ng-scope">
<head>
    <meta charset="UTF-8">
    <title>Venue review</title>
    <link rel="stylesheet" href="/stylesheets/index.css">
    <link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <script src="/vendors/angular/angular.min.js"></script>
    <script src="/vendors/angular-route/angular-route.min.js"></script>
    <script src="/vendors/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="/vendors/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
    <script src="/javascripts/client.js"></script>
    <script src="/javascripts/HomeController.js"></script>
    <script src="/javascripts/RegisterController.js"></script>
    <script src="/javascripts/VenueController.js"></script>
    <script src="/javascripts/LoginController.js"></script>
    <base href="/">
</head>
<header>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Venue</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="/venuePage"><i class="fa fa-music"></i> Venues</a></li>
                <li><a href="/register"><i class="fa fa-user-plus"></i> Register</a></li>
                <li><a href="/login"><i class="fa fa-sign-in"></i> Log In</a></li>
            </ul>
        </div>
    </nav>

</header>



<div id="main">
    <ng-view>

    </ng-view>

    <footer class="footer">
        <div class="container">
            <p class="text-muted">Place sticky footer content here.</p>
        </div>
    </footer>

</div>
</body>
</html>

Answer 1

您需要在不在应用程序实例angular上的app对象上调用extend：

angular.extend($scope, {
    center: {
        lat: 44.97,
        lng: 93,
        zoom: 15
    }
});

https://docs.angularjs.org/api/ng/function/angular.extend

.extend不是函数？我使用角和传单

1 个答案: