Angularjs + RubyonRails + Google Maps错误：[$ injector：unpr]未知提供者：tProvider＆lt; - t

Question

我用angulajs和rubyon rails创建了一个应用程序。我希望向用户显示谷歌地图以获取一个特定的latituts和经度我是这样的错误

这是我的代码。

Angularjs指令代码

app.directive('map', function() {

return {

restrict: "A",

template: "<div id='areaMap'></div>",

    scope: {           
        area: "=",
        zoom: "="
    },
    controller: function ($scope) {
        var mapOptions;
        var map;           
        var marker;

        var initialize = function () {                                
            mapOptions = {
                zoom: $scope.zoom,
                //center: new google.maps.LatLng(40.0000, -98.0000),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            map = new google.maps.Map(document.getElementById('areaMap'), mapOptions);
        };

        var createMarker = function (area) {
            var position = new google.maps.LatLng(area.Latitude, area.Longitude);
            map.setCenter(position);
            marker = new google.maps.Marker({
                map: map,
                position: position,
                title: area.Name
            });               
        };

        $scope.$watch("area", function (area) {
            if (area != undefined) {
                createMarker(area);
            }
        });

        initialize();
    },
};
});

---

控制器

function EventDetailsCtrl($scope, $http, $location, $routeParams, $sce) {  

   var event_id = $routeParams.event_id
   var url = 'API_URL_FOR_JSON';

   $http.jsonp(url).success(function(data) {
     $scope.event = data;
      $scope.Area = { 
                  Name: "Melbourne", 
                  Latitude: data.event.latitude,
                  Longitude: data.event.longitude
                 };
    $scope.latitude = data.event.latitude;
    $scope.longitude = data.event.longitude;
  }); 

}

---

查看文件

<div ng-controller ="EventDetailsCtrl">         
   <div map area="Area" zoom="20"></div>
</div>

=============================================== ===============

如何解决此Issue.pls帮助 在此先感谢。

Answer 1

创建控制器时出现语法错误：

app.controller('EventDetailsCtrl',['$scope','$http','$location','$routeParams','$sce',function($scope, $http, $location, $routeParams, $sce) {  

   var event_id = $routeParams.event_id
   var url = 'API_URL_FOR_JSON';

   $http.jsonp(url).success(function(data) {
     $scope.event = data;
      $scope.Area = { 
                  Name: "Melbourne", 
                  Latitude: data.event.latitude,
                  Longitude: data.event.longitude
                 };
    $scope.latitude = data.event.latitude;
    $scope.longitude = data.event.longitude;
  }); 

}]);

并且记得在html标记中使用ng-app来提升角度（如果你还没有这样做）。

可能会缩小js文件。如果在没有正确注入依赖项的情况下缩小控制器，则会产生语法错误，因此最好使用正确的语法编写一个控制器，其中注入了所有依赖项，如上所述。