在地图上显示对话框单击

时间:2015-07-07 15:23:59

标签: angularjs openlayers-3

我有一个来自Openlayers Directive的ol3地图元素,我想在点击时显示添加标记对话框。当您单击地图时,它正在注册位置,但我收到此错误:

TypeError: Cannot read property 'show' of undefined
    at Scope.$scope.showAddMarker (map.controller.js:60)
    at map.controller.js:54
    at Scope.parent.$get.Scope.$evaL
    ...

我正在尝试将this示例用于mdDialog。我打开对话框的代码位于地图的控制器中。

angular.module('comhubApp')
//Fixed the initial import error
.controller('MapCtrl', [ '$scope', '$mdDialog', function ($scope, $mdDialog) {
    angular.extend($scope, {
        windsor: { 
            lat: 42.300095327770569,
          lon: -83.02625377869369,
          zoom: 13
        },
        center: {
            lat: 54.063408,
          lon: -101.910305,
            zoom: 3
        },
        defaults: {
    events: {
        map: [ 'singleclick', 'pointermove' ]
    }
  },
  mouseposition: {},
  mouseclickposition: {},
  projection: 'EPSG:4326'
    });

$scope.$on('openlayers.map.singleclick', function(event, data) {
      $scope.$apply(function() {
        if ($scope.projection === data.projection) {
            $scope.mouseclickposition = data.coord;
        } else {
            var p = ol.proj.transform([ data.coord[0], data.coord[1] ],     data.projection, $scope.projection);
            $scope.mouseclickposition = {
                lat: p[1],
                lon: p[0],
                projection: $scope.projection
            }
//THIS IS WHERE THE PROBLEMS STARt :(:(:(:(:(:(:(:(:(:(:(:(:(:(
            $scope.showAddMarker();
        }
    });
});

 $scope.showAddMarker = function()  {
  $mdDialog.show({
    controller: AddMarkerCtrl,
    // templateUrl: '../addMarker',
    template: '<md-dialog><add-marker></add-marker></md-dialog>',
    parent: angular.element(document.body),
    targetEvent: ev,
    locals: {point: $scope.mouseclickposition }
  });
  // .then(function(answer) {
  //   $scope.alert = 'You said the information was "' + answer + '".';
  // }, function() {
  //   $scope.alert = 'You cancelled the dialog.';
  // });
};

function AddMarkerCtrl($scope, $mdDialog) {

$scope.closeDialog = function() {
  // Easily hides most recent dialog shown...
  // no specific instance reference is needed.
  $mdDialog.hide();
};

}

我可以按照我在这里的方式在地图控制器内使用控制器吗?这似乎是糟糕的形式,但我不知道如何分开它。我正在设置addMarker html作为指令,但我认为这可能是错误的,或者至少实现错误。我是angularjs和很多人的新手。如果您需要查看其他代码,请告诉我。

1 个答案:

答案 0 :(得分:0)

原来问题在于注入$mdDialog

就是这样:

.controller('MapCtrl', [ '$scope', function ($scope, $mdDialog) {

这就是修复:

.controller('MapCtrl', [ '$scope', '$mdDialog', function ($scope, $mdDialog) {