Question

最近我试图使用anuglar native ui.map将map合并到partial中。 Hovewer，似乎我的部分尝试在我引导它之前初始化地图控制器。应该怎样做才能按顺序初始化所有元素？

app.js

var app = angular.module('mapApp', ['ngRoute', 'ngResource', 'mainControllers', 'ui.bootstrap', 'ui.map']).config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
    templateUrl : 'partials/home.html',
    controller : 'homeCtrl'
});
    $routeProvider.otherwise({
        redirectTo : '/'
    });
}]);

controllers.js

function onGoogleReady() {
    console.log("Google maps ready!");
    angular.bootstrap($('#map'), ['mapControllers']);
}

var controllers = angular.module('mainControllers', []);
var mControllers = angular.module('mapControllers', ['ui.map']);

controllers.controller('homeCtrl', ['$rootScope',
function($rootScope) {
   $rootScope.active = 0;
}]);

mControllers.controller('mapCtrl', ['$scope',
function($scope) {
    console.log("Map controller initialized NOW!!!");
    $scope.mapOptions = {
        center : new google.maps.LatLng(35.784, -78.670),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
}]);

home.html的

<div class="starter-template">
    <h1>Main home template</h1>
</div>
<div id="map" ng-controller="mapCtrl">
    <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</div>

index.html脚本包含（位于文件底部）

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/angular-ui-map/ui-map.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

返回错误：

Error: [ng:areq] Argument 'mapCtrl' is not a function, got undefined

Answer 1

似乎使用ng-app指令导致引导代码的每个部分而不可能直接控制它。要正确地手动引导控制器，我必须删除该指令并仅使用＆＃34; ng-controller＆＃34;适当div内的指令。删除ng-app后，一切似乎都运行正常 - 在加载谷歌地图并且模型可供基础元素使用后，控制器被引导。

部分内部的引导映射

1 个答案: