我试图在我的rails应用程序中加载一个空白的谷歌地图应用程序(我将在稍后通过facotries添加标记等)。这种格式在我的上一个项目中有效,但不幸的是,这次我无法加载它。
我通过bower install angular
使用了Bower,但似乎我在浏览器中设置了错误Error: [ng:areq] Argument 'MapController' is not a function, got undefined
,地图应该是红线。它确保所有命名空间都匹配,但它仍然很短。
同样奇怪的是,ng:areq
错误来自公共资产文件,而不是下面的文件(文件application-1f030c1aa52b19b22da2952dccdcd4ba.js:6
)
错误
控制台错误:
var injector = angular.injector(['Sessions_Map', 'ng']);
返回undefined
MapController
返回MapController is not defined
Error: [ng:areq] Argument 'MapController' is not a function, got undefined
http://errors.angularjs.org/1.3.15/ng/areq?p0=MapController&p1=not%20a%20function%2C%20got%20undefined
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at Mt (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at _t (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at x (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at vt (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at g (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at g (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at application-dc67be4c50a7a0828f3e243f50780c24.js:42(anonymous function) @ application-dc67be4c50a7a0828f3e243f50780c24.js:42
application.rb中
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
的application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require map_app.js
map_app.js
var Sessions_Map = angular.module('Sessions_Map' , []);
Sessions_Map.controller('MapController', function($scope){
});
Sessions_Map.directive("myMaps", function() {
return {
restrict: 'E',
template: '<div></div>',
replace: true,
link: function (scope, element, attrs) {
var mapOptions = {
center: new google.maps.LatLng(34.029732, -118.449528),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
}
};
});
Map.html.erb
<!doctype html>
<html ng-app="Sessions_Map">
<head>
<%= javascript_include_tag "map_app.js", "data-turbolinks-track" => true %>
<title>
Google Maps
</title>
<style>
#map-canvas{
height:650px;
width:1050px;
border:2px solid red;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcRGSjkX4Meav-RxEzY4SXQnVwKnedZvE">
</script>
<script type="text/javascript"></script>
</head>
<body ng-controller="MapController">
<my-maps id="map-canvas"></my-maps>
</body>
</html>
答案 0 :(得分:1)
application-dc67be4c50a7a0828f3e243f50780c24.js
您的构建过程究竟是什么/ asset pipeline?
您是否正确配置了资产路径?
config.assets.paths << Rails.root.join("...stuff...")
请注意,您正在创建一个新模块(传递空的requires
数组)
var Sessions_Map = angular.module('Sessions_Map' , []); // create
你稍后再创建它而不是检索它。
var Sessions_Map = angular.module('Sessions_Map'); // retrieve
我认为那两个街区不应该在那里......
<script type="text/javascript"
src="/app/assets/javascripts/angular-animate.min.js.map">
</script>
<script type="text/javascript"
src = "/app/assets/javascripts/app/map_app.js">
</script>
因为你已经拥有:
<%= javascript_include_tag "application.js", "data-turbolinks-track" => true %>
本身有以下要求:
//= require angular-animate
//= require app/map_app
在此跟踪中,函数名为Mt
,_t
,v
和g
我可以看到正在进行缩小。
Error: [ng:areq] Argument 'MapController' is not a function, got undefined
http://errors.angularjs.org/1.3.15/ng/areq?p0=MapController&p1=not%20a%20function%2C%20got%20undefined
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at Mt (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at _t (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at application-dc67be4c50a7a0828f3e243f50780c24.js:42
at x (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at vt (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at g (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at g (application-dc67be4c50a7a0828f3e243f50780c24.js:42)
at application-dc67be4c50a7a0828f3e243f50780c24.js:42(anonymous function) @ application-dc67be4c50a7a0828f3e243f50780c24.js:42
请确保使用正确的依赖注入语法才能正常工作。
https://docs.angularjs.org/tutorial/step_05 - &gt; &#34;关于缩小的注释&#34;
编辑:您可以调整rails配置中的uglifier
步骤以查看结果application-[checksum].js
,并实际看到您的控制器在那里。
WARNING: Tried to load angular more than once.
您的代码中的某个位置可能会加载角度两次,并且可能会弄乱前面的模块声明。