ngMaterial error in Angular app: TypeError: Cannot read property 'confirm' of undefined

Question

我正在尝试在我的 Angular 应用程序中使用 ngMaterial 并收到错误：ReferenceError: $event is not defined 和 TypeError: Cannot read property 'confirm' of undefined。我查看了 ngMaterial 文档并使用了此示例中的代码：https://material.angularjs.org/latest/demo/dialog 但找不到我做错了什么。

ReferenceError 指的是这一行： $timeout($scope.showConfirm($event), 500);

TypeError 是指：

var confirm = $mdDialog.confirm()

下面是我的代码：

html:

<div style="height: 100%">
    <h1>TEST</h1> <!--NOT SHOWING ON PAGE WHICH MEANS THIS IS NOT BEING INVOKED WHEN
                  URL IS: '/getLocation' like it should-->
        <ui-gmap-google-map
    class="md-primary md-raised" ng-click="showConfirm($event)"
                        center='map.center'
                        zoom='map.zoom'
                        draggable='map.draggable'
                        dragging='map.dragging'
                        refresh='map.refresh'
                        options='map.options'
                        events='map.events'
                        pan='map.pan'>


        <ui-gmap-marker
        idKey='1'
        events='map.events'
        coords='map.center'
        >
       </ui-gmap-marker>

    </ui-gmap-google-map>

<script src='//maps.googleapis.com/maps/api/js?key=AIzaSyD4_0KuPivZyV-1EwNGmBCgLc_Z0o8Dyw8'></script>
</div>

控制器：

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router', 'ngMaterial'])



  .config(function ($stateProvider) { //had: , $stateChangeError included in the function parameters, but that caused error 
      $stateProvider.state('getLocation', {
          url: '/getLocation',
          templateUrl: 'getlocation.html', 
          controller: 'GetlocationCtrl',
      });
  })



    .controller('GetlocationCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$state", "$stateParams", "$timeout",
      function ($scope, $log, GoogleMapApi, $state, $stateParams, $timeout, $mdDialog) {
          $log.currentLevel = $log.LEVELS.debug;
          center = { latitude: 49.22, longitude: -122.66 }; //default center


          console.log($stateParams);



          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: 
          {    click: function newCenter(mapModel, eventName, originalEventArgs)
          {
            $scope.$apply(function(){
              var e = originalEventArgs[0];
              $scope.map.center = { latitude: e.latLng.lat(), longitude: e.latLng.lng() };
              $timeout($scope.showConfirm($event), 500);
            });
          }
          }

          }

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500, //(current time - date lost)*km/hour
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          };




  $scope.showConfirm = function (ev) {
    // Appending dialog to document.body to cover sidenav in docs app
    var confirm = $mdDialog.confirm()
          .title('Would you like to delete your debt?')
          .textContent('All of the banks have agreed to forgive you your debts.')
          .ariaLabel('Lucky day')
          .targetEvent(ev)
          .ok('Please do it!')
          .cancel('Sounds like a scam');

    $mdDialog.show(confirm).then(function() {
      $scope.status = 'You decided to get rid of your debt.';
    }, function() {
      $scope.status = 'You decided to keep your debt.';
    });
  };

      } ]); //end of controller


      //THIS LISTENER DOES NOT DO ANYTHING
//      $scope.map.event.addListener(map, 'click', function(event) {
//    alert(event.latLng);  // in event.latLng  you have the coordinates of click
//});

//function confirmLocation() {
//    alert('Use this location as {{petName}}\'s last location?')
//}






})(window, angular);

Answer 1

你的controller没有注入mdDialog，你注入的方式有问题，改成下面这样，

controller('GetlocationCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$state", "$stateParams", "$timeout","$mdDialog",
      function ($scope,uiGmapLogger, uiGmapGoogleMapApi, $state, $stateParams, $timeout, $mdDialog) {

ngMaterial error in Angular app: TypeError: Cannot read property 'confirm' of undefined

ngMaterial error in Angular app: TypeError: Cannot read property 'confirm' of undefined

angularjs

angularjs-material