Angular中调用$mdDialog.show报错：不是函数，求技术支持

这个错误我之前也碰到过，基本上是Angular Material的依赖配置或者服务注入环节出了问题，给你一步步梳理解决方案：

1. 确认Angular Material及相关依赖已正确安装/引入 #

$mdDialog是Angular Material提供的专属服务，首先得确保项目里包含了必要的依赖：

• 如果用npm安装，执行以下命令：

  npm install angular-material angular-animate angular-aria angular-messages --save
  

• 如果用CDN引入，要在你的index.html里按顺序添加这些资源（顺序很重要，依赖必须先于核心库加载）：

  <!-- Angular核心库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- Angular Material必需依赖 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js"></script>
  <!-- Angular Material核心库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.2/angular-material.min.js"></script>
  <!-- Angular Material样式文件 -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.2/angular-material.min.css">
  

2. 在你的Angular模块中注入ngMaterial #

打开定义应用模块的文件，确保把ngMaterial加入到依赖数组中：

angular.module('yourAppName', ['ngMaterial']);

注意替换yourAppName为你实际的应用模块名称

3. 确保在调用$mdDialog.show的控制器中正确注入服务 #

你的openAddVideoModal函数所在的控制器（也就是绑定按钮点击事件的那个控制器）必须注入$mdDialog服务，否则无法调用它的方法。比如：

angular.module('yourAppName').controller('YourMainCtrl', function($mdDialog) {
  var _this = this;
  this.currentUser = /* 你的用户数据 */;

  this.openAddVideoModal = function() { 
    var modalInstance = $mdDialog.show({ 
        templateUrl: 'createDesign.html', 
        controller: 'createDesignCtrl', 
        resolve: { 
            currentUser: function () { 
                return _this.currentUser; 
            }, 
            postOptions: function() { 
                return {"receiverId":0}; 
            } 
        }, 
        parent: angular.element(document.body), 
        clickOutsideToClose:true, 
        fullscreen: false 
    }); 
  };
});

同时，你的createDesignCtrl也要注入resolve中定义的参数，才能拿到传递的数据：

angular.module('yourAppName').controller('createDesignCtrl', function($scope, currentUser, postOptions) {
  // 在这里使用传递过来的currentUser和postOptions
  $scope.currentUser = currentUser;
  $scope.postOptions = postOptions;
});

4. 额外排查点 #

• 检查拼写：确保是$mdDialog（首字母大写，带$前缀），不要写成mdDialog或者其他错误拼写；
• 按钮绑定：确认按钮的ng-click正确绑定到了控制器的方法，比如ng-click="vm.openAddVideoModal()"（如果用controllerAs语法的话）；
• 上下文问题：不要在Angular控制器外部调用这个函数，否则会找不到$mdDialog服务。

内容的提问来源于stack exchange，提问作者MTs