AngularJS中$mdDialog加载模板失败问题求助

咱们一步步拆解你遇到的[$compile:tpload]错误，把它解决掉：

1. 先排查模板路径是否正确 #

这是最常见的触发原因！你得确认editUser.html的位置和index.html的相对路径是否匹配：

• 如果editUser.html和index.html在同一个目录下，那templateUrl: 'editUser.html'是对的；但如果模板放在子文件夹（比如/templates）里，就得写成templateUrl: 'templates/editUser.html'。
• 快速验证方法：直接在浏览器地址栏输入模板的完整访问地址（比如http://localhost:3000/editUser.html），如果能看到模板内容，说明路径没问题；如果出现404，那就是文件放错位置或者服务器没托管这个文件。

2. 修正模板内容的冗余嵌套 #

你的editUser.html外层多了一个<div>，AngularJS Material的对话框模板只需要直接包含<md-dialog>即可，多余的外层容器会干扰编译。修改后的模板应该是：

<md-dialog aria-label="Add User">
  <p>Here I will place my input elements</p>
</md-dialog>

3. 确认AngularJS Material依赖是否正确配置 #

别忘了确保你的项目已经正确引入了AngularJS Material的资源，并且主模块依赖了ngMaterial：

• 在index.html里引入必要的文件：

  <link rel="stylesheet" href="angular-material.min.css">
  <script src="angular.min.js"></script>
  <script src="angular-animate.min.js"></script>
  <script src="angular-aria.min.js"></script>
  <script src="angular-material.min.js"></script>
  

• 你的主模块声明要包含ngMaterial：

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

4. 尝试内嵌模板（彻底避免路径问题） #

如果路径问题一直搞不定，你可以把模板直接内嵌到index.html里，用AngularJS的text/ng-template类型，这样$mdDialog会直接从模板缓存读取，不用发HTTP请求：
在index.html里添加这段代码：

<script type="text/ng-template" id="editUser.html">
  <md-dialog aria-label="Add User">
    <p>Here I will place my input elements</p>
  </md-dialog>
</script>

这样原来的$mdDialog.show()代码不用改，就能正常加载模板了。

5. 检查服务器配置 #

如果你用本地服务器（比如http-server、live-server），确保服务器的启动目录是你的项目根目录。比如你在项目根目录下运行http-server，而不是在某个子文件夹里，这样服务器才能正确找到editUser.html文件。

修正后的完整示例 #

控制器代码（确保DialogController已经定义）：

function YourController($mdDialog) {
  var vm = this;

  vm.addUser = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'editUser.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose: true,
    });
  };

  // 别忘了定义对话框内部的控制器
  function DialogController($mdDialog) {
    // 这里可以添加对话框的交互逻辑，比如关闭按钮
    this.closeDialog = function() {
      $mdDialog.hide();
    };
  }
}
angular.module('yourApp').controller('YourController', YourController);

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