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中的脚本标记，并确保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中的ID完全相同。（我建议你使用复制和粘贴来避免拼写错误。）

<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>

希望这能回答你的问题。如果您需要更多帮助或更多规格，请不要犹豫。：）

未知的提供程序错误，依赖注入，模式控制器

2 个答案: