AngularJS模态框加载触发$injector:unpr未知提供者错误求助

这个错误我之前踩过坑，大概率是代码压缩/混淆后，AngularJS无法正确识别依赖注入的参数导致的。你看错误提示里的eProvider <- e，其实e是压缩工具把你的某个依赖参数名改成了短变量名，Angular找不到对应的提供者就报错了。

先看你给出的指令代码，写法不符合AngularJS的依赖注入规范，这是核心问题所在：

angular.module('myApp').directive('ssdropdownmulti', [ssdropdownmulti]);

数组里应该放字符串形式的依赖服务名称，最后才是指令函数（或者用$inject显式声明依赖），你直接把函数放进数组的写法会让压缩工具搞乱依赖识别。

解决方案步骤 #

1. 修正指令的依赖注入写法 #

推荐用$inject属性显式声明依赖（即使你的指令没有依赖其他服务，也建议这么写，从根源避免压缩出问题）：

(function () { 
  angular.module('myApp').directive('ssdropdownmulti', ssdropdownmulti);

  // 显式声明依赖，空数组表示该指令不需要依赖其他服务
  ssdropdownmulti.$inject = [];

  function ssdropdownmulti() { 
    return { 
      restrict: 'E', 
      scope: { 
        model: '=', 
        options: '=', 
        pre_selected: '=preSelected', 
        dropdownTitle: '@' 
      }, 
      template : "<div class='btn-group' ng-class='{open: open}'>" + "<button class='btn btn-small'>"
      // 补全你的模板剩余内容
    };
  }
})();

或者用数组式写法（适合有依赖的场景）：

(function () { 
  // 数组里放依赖服务名（无依赖就空数组），最后是指令函数
  angular.module('myApp').directive('ssdropdownmulti', [function() {
    return { 
      restrict: 'E', 
      scope: { 
        model: '=', 
        options: '=', 
        pre_selected: '=preSelected', 
        dropdownTitle: '@' 
      }, 
      template : "<div class='btn-group' ng-class='{open: open}'>" + "<button class='btn btn-small'>"
      // 补全模板
    };
  }]);
})();

2. 检查模态框相关组件的依赖注入 #

错误是在模态框加载时触发的，除了指令，还要检查模态框对应的控制器、服务是否也存在同样的问题——比如控制器没有用显式依赖注入，压缩后参数被重命名，导致Angular找不到对应提供者。

举个控制器的正确写法例子：

// 控制器的显式依赖注入写法
angular.module('myApp').controller('ModalCtrl', ModalCtrl);
ModalCtrl.$inject = ['$scope', '$uibModal']; // 这里的字符串不会被压缩工具修改
function ModalCtrl($scope, $uibModal) {
  // 控制器逻辑
}

3. 代码压缩时的注意事项 #

如果用Webpack、Gulp等工具打包，建议集成ng-annotate这类工具，它会自动给你的Angular代码添加依赖注入注解，避免手动写注解遗漏的问题。

额外排查点 #

如果按上面的方法改完还是报错，检查一下模态框的模板里有没有用到未定义的过滤器/服务，比如不小心写了{{ item | e }}这种不存在的过滤器，也会触发类似的错误。

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