我正在尝试在我的 rails 应用程序中加载一个空白的谷歌地图应用程序(稍后我将通过 facotries 等添加标记)。这种格式在我的上一个项目中有效，但不幸的是这次我无法加载它。
我通过 bower install angular 使用 Bower ，但似乎我设置了一个错误 Error: [ng:areq] Argument 'MapController' is not a function, got undefined从浏览器中用红线显示 map 应位于的位置。它确保所有 namespace 都匹配，但仍然不足。
同样奇怪的是这个ng:areq错误来自公共(public) Assets 文件，而不是下面的文件(文件 application-1f030c1aa52b19b22da2952dccdcd4ba.js:6)
错误
控制台错误:var injector = angular.injector(['Sessions_Map', 'ng']);返回 undefinedMapController返回 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
应用程序.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
应用程序.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>
最佳答案
application-dc67be4c50a7a0828f3e243f50780c24.js
您的构建过程到底是什么/asset pipeline ?
配置/应用程序.rb
您是否正确配置了 Assets 路径？
config.assets.paths << Rails.root.join("...stuff...")
应用程序/map_app.js
请注意，您正在创建一个新模块(传递一个空的
requires 数组)var Sessions_Map = angular.module('Sessions_Map' , []); // create
您稍后将创建第二次而不是检索它。
var Sessions_Map = angular.module('Sessions_Map'); // retrieve
map .html.erb
我认为那两个街区不应该在那里......
<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
请确保使用正确的语法以使依赖注入(inject)正常工作。
https://docs.angularjs.org/tutorial/step_05 ->“关于缩小的说明”
编辑 : 你可以调整
uglifier进入您的 Rails 配置以查看结果 application-[checksum].js ，并实际看到您的 Controller 在那里。编辑:
WARNING: Tried to load angular more than once.
有可能在您的代码中某处加载了 angular 两次，并且可能弄乱了之前的模块声明。
关于angularjs - 错误 : [ng:areq] Argument Controller is Not a Function，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29645769/