部分内部引导映射

最近我试图在anuglar native ui.map中使用部分内部映射。 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

来源

2014-10-20 SzybkiSasza

其中你包含'controllers.js'？ – 2014-10-20 14:45:58

异步在我身体的底部。我添加编辑到我的主要消息与细节:) – SzybkiSasza 2014-10-20 15:10:14

看来，采用NG-程序指令导致自举代码的每一部分没有可能性直接控制它。为了正确地手动引导控制器，我必须删除该指令，并在适当的div内只使用“ng-controller”指令。删除ng-app后，一切似乎都正常工作 - 控制器在加载谷歌地图并且模型可用于底层元素后被引导。

来源

2014-10-29 15:29:21 SzybkiSasza

部分内部引导映射

回答

相关问题