如何在Angular UI Bootstrap中为模态和非模态形式使用相同的控制器？

Question

我有一个带注册表格的模态.相同的表单应显示在目标网页的底部而不是模式中.

目前我的处理注册模式的控制器$modalInstance作为其参数之一$scope等.如果我添加ng-controller="SignUpCtrl"到着陆页中的元素,它不起作用,因为控制器不是通过$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,它将为null.

Answer 3

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

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

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

PS：这里给出的代码片段来自Angular ui 的页面。检查该页面的文档selectedItem