angularjs - 错误 : [ng:areq] Argument Controller is Not a Function-6ren

angularjs - 错误 : [ng:areq] Argument Controller is Not a Function

转载作者：行者123 更新时间：2023-12-04 12:53:38

我正在尝试在我的 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 在那里。

编辑: