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中获取模态表单中的所有数据，并在目标网页表单中使用此数据。另外，你如何打开模态。如果是通过按钮，则使用$modal.open将该ng模型绑定到打开模态。不要为模态创建单独的控制器。使用与登录页面相同的控制器。通过这种方式，您可以使用1个控制器打开模态以及模态关闭后的其他功能。

PS：此处提供的代码段来自angular ui's page。查看该页面的selectedItem

文档

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

3 个答案: