Question

我试图在我的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>

Answer 1

application-dc67be4c50a7a0828f3e243f50780c24.js

您的构建过程究竟是什么/ asset pipeline？

配置/ application.rb中

您是否正确配置了资产路径？

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

请确保使用正确的依赖注入语法才能正常工作。

https://docs.angularjs.org/tutorial/step_05 - ＆gt; ＆＃34;关于缩小的注释＆＃34;

编辑：您可以调整rails配置中的uglifier步骤以查看结果application-[checksum].js，并实际看到您的控制器在那里。

编辑：

WARNING: Tried to load angular more than once.

您的代码中的某个位置可能会加载角度两次，并且可能会弄乱前面的模块声明。

错误：[ng：areq]参数控制器不是函数

1 个答案:

配置/ application.rb中

应用程序/ map_app.js

Map.html.erb

缩小

编辑：