如何在 Angular UI Bootstrap 中对模态和非模态表单使用相同的控制器？

Question

我有一个带有注册表单的模式。相同的表单应该显示在着陆页的底部，而不是模式。

目前我处理注册模式的控制器将$modalInstance 作为其参数之一以及$scope 等。如果我将ng-controller="SignUpCtrl" 添加到登录页面中的元素，它不起作用，因为控制器不是t 通过 $modal.open 方法创建，因此 Angular 抱怨 Unknown provider: $modalInstanceProvider <- $modalInstance。

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

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

Answer 1

在挣扎了很长时间后，我找到了一个更简单的技巧，可以将我们的控制器重用于模态和正常情况。

我发现我们可以将调用者的作用域传递给模态控制器，所以我将 modalInstance 推入 $scope 并将其传递给模态控制器。 现在你没有未知的提供者问题，因为 $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);
};

干杯！

Answer 2

如果您使用的是 ui-router，您可以轻松地使用 ui-router 的解析来提供 $uibModalInstance（之前是 $modalInstance）：

$stateProvider
.state('conductReview', {
    url: '/review',
    templateUrl: '/js/templates/review.html',
    controller: 'yourController',
    resolve: {
        $uibModalInstance: function () { return null; } // <- workaround if you want to use $uibModalInstance in your controller.
    }
})

这样您就可以像使用普通控制器一样使用模态控制器。如果您在控制器中注入 $uibModalInstance ，它将为空。

Answer 3

如果您想对模态表单和登录页面表单使用相同的控制器，请使用

modalInstance.result.then(function (selectedItem) { $scope.selected = selectedItem; }, function () { $log.info('Modal dismissed at: ' + new Date()); });

您可以从selectedItem 的模态表单中获取所有数据，并将其用于登录页面表单。 另外，如何打开模态。如果是通过按钮，请使用$modal.open 将该 ng-model 绑定到打开模式。不要为您的模式创建单独的控制器。使用与登录页面相同的控制器。这样您就可以使用 1 个控制器打开模态以及关闭模态后的其他功能。

PS： 这里给出的代码 sn-p 来自 angular ui's page。检查该页面的文档以获取 selectedItem