未知的提供者错误、依赖注入、模态控制器

Question

我正在尝试构建一个自定义模式服务来接受数据并使用这些输入生成一个模式；但是，当将控制器的文字标识符传递给模态的controller 属性时，我收到了未知的提供者错误是 Angular。

我的应用程序的其他地方有依赖注入；它只是失败了，在这里。我知道，关于 SO 处理这个问题有很多问题；但是，在我读过的那些中，我无法找到一个更通用的答案，这可能会开始为我指明正确的方向。

这是我的服务代码：

angular.module('app').service('CustomModalService', ['$uibModal', function ($uibModal) {

    this.openCustomModal = function (size, title, message, action) {
        var actionToPerformOnConfirm = action;

        var modalInstance = $uibModal.open({
            templateUrl: 'templates/CustomModal.html',
            controller: 'CustomModalInstanceController',
            controllerAs: 'vm',
            size: size,
            resolve: {
                content: function () {
                    return {
                        title: title,
                        message: message
                    };
                }
            }
        });

        modalInstance.result.then(function (actionToPerformOnConfirm) {
            console.log('something happened');
        }.bind(this));
    };
}]);

这是上面引用的模态控制器：

angular.module('app').controller('CustomModalInstanceController', function ($uibModalInstance, content) {
    var vm = this;

    vm.title = content.title;
    vm.message = content.message;

    $scope.confirmAction = function () {
        $uibModalInstance.close();
    };

    $scope.cancelAction = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

根据我对 Angular 的理解，这应该足够了。 如果控制器引用被删除，则此服务中一切正常，否则。

甚至还有this question（我遇到的所有问题的一个很好的总结）证实了我在网上看到的文档和众多示例；但是，我仍然收到未知的提供者错误。这个用户甚至问same question（再次，从我所见，我的代码是一个“正确”的光辉例子）！

为了说明两者都在同一个目录下，下面是目录结构图：

我需要从哪里着手解决这个问题？这是应用程序配置问题吗？

Answer 1

我将回答我自己的问题，非常感谢 Manu Antony 与我合作。问题不在于控制器本身的注入，而在于提供给控制器的参数。

最后，这是我的语法错误。

这是正确的控制器签名语法（我添加了有趣的范围）：

angular.module('app').controller('CustomModalInstanceController', ['$scope', '$uibModalInstance', 'content', function ($scope, $uibModalInstance, content) { ...

Answer 2

当我确实遇到这些问题时，它们非常令人沮丧。我为解决这些问题采取的步骤是返回到 html 中的 script 标签，并确保 ID 与 templateUrl 相同。所以在这里我向你展示我在哪里创建我的模态：

  var editPatient = $uibModal.open({    //Here is where the modal gets created. you set the html page and the controller
        templateUrl: 'EditPatientData.html',
        controller: 'EditPatientData',
        size: size,
        resolve: {
            data: function () {
                return angular.copy(patientModel);
            }
        }
    });

现在下面我将向您展示我的 Html 文件中映射到上面代码的代码。确保脚本标签中的 ID 与您的 js 中的完全相同。 （我建议你使用复制和粘贴来避免拼写错误。）

<script type="text/ng-template" id="EditPatientData.html">
    <div class="modal-header">
        <h3 class="modal-title">Edit Patient Data</h3>
    </div>
    <div class="modal-body">
     //whatever you want to display
    </div>
</script>

希望这能回答您的问题。如果您需要更多帮助或更多规范，请随时提出。 :)