部分內部引導映射

最近我試圖在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

部分內部引導映射

回答

相關問題