angularjs - 如何在 Angular UI Bootstrap 中为模态和非模态表单使用相同的 Controller ？

Question

我有一个带有注册表单的模态。相同的表单应该显示在登录页面的底部，而不是在模态中。

目前我处理注册模式的 Controller 需要 $modalInstance作为其参数之一 $scope等如果我添加 ng-controller="SignUpCtrl"对于登录页面中的元素，它不起作用，因为 Controller 不是通过 $modal.open 创建的方法等 Angular 提示 Unknown provider: $modalInstanceProvider <- $modalInstance .

我有一个用于注册用户的服务( authService.signUp(data).then/catch...) ，但 Controller 本身做了更多的工作 - 处理输入，发出事件(例如带有翻译的错误消息)，设置 cookie 等。

在不复制几乎整个 Controller 代码的情况下处理这种情况的最佳方法是什么？我应该将代码从 Controller 移动到另一个更高级别的服务中吗？

Answer 1

在挣扎了很长时间之后，我发现了一个更简单的技巧，可以在模态和正常情况下重用我们的 Controller 。

我发现我们可以将调用者的范围传递给模态 Controller ，因此我将 modalInstance 插入 $scope 并将其传递给模态 Controller 。
现在您没有未知的提供者问题，因为 $scope 是一个众所周知的问题。

下面是一个例子:

CallerController = function($rootScope, ...) {
   var modalScope = $rootScope.$new();
   modalScope.modalInstance = $modal.open({
        templateUrl: tempUrl,
        controller: ReusableModalController,
        scope: modalScope // <- This is it!
    });

    modalScope.modalInstance.result.then(function (result) {
        // Closed
    }, function () {
        // Dismissed
    });
};

ReusableModalController = function($scope, ...){
    var dataToSendBack = 'Hello World';
    $scope.modalInstance.close(dataToSendBack);
};

干杯!