如何在角度UI引导中对模态和非模态形式使用相同的控制器?

I've got a modal with a registration form. The same form should be displayed at the bottom of the landing page not in a modal.

我有一份登记表。同样的表单应该显示在着陆页面的底部，而不是以模式显示。

Currently my controller that handles registration modal takes $modalInstance as one of its parameters along $scope etc. If I add ng-controller="SignUpCtrl" to an element in the landing page, it doesn't work, because the controller wasn't created via $modal.open method and so Angular complains about Unknown provider: $modalInstanceProvider <- $modalInstance.

目前，处理注册模式的控制器将$modalInstance作为它的参数之一，包括$scope等。open method和so角抱怨未知提供程序:$modalInstanceProvider <- $modalInstance。

I've got a service for registering users (authService.signUp(data).then/catch...), but the controller itself does a bit more - handles input, emits events (e.g. with translated error messages), sets cookies etc.

我有一个为用户注册的服务(authService.signUp(data)，然后/catch…)，但是控制器本身做了更多的工作——处理输入，发送事件(例如，使用翻译错误消息)，设置cookie等等。

What's the best way to handle such case without duplicating almost whole controller code? Should I move the code from controller into yet another, higher-level service?

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

3 个解决方案

#1

After struggling for a long while I found a easier trick to reuse our Controller for both modal and normal case.

在挣扎了很长一段时间之后，我发现了一种更简单的技巧，可以将我们的控制器用于模式和正常情况。

I found that we can pass caller's scope to modal controller, so I pushed modalInstance into $scope and passed it to the modal controller. Now you don't have unknown provider problem because $scope is a well known one.

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

Below is an example:

下面是一个例子:

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);
};

Cheers!

干杯!

#2

If you are using ui-router you can easily use the resolve from ui-router to provide a $uibModalInstance (was $modalInstance before):

如果您正在使用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.
    }
})

That way you can use your modal controller like a normal controller. If you inject $uibModalInstance in your controller it will be null.

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

#3

If you want to use same controller for both modal form as well as landing page form, make use of

如果你想同时使用相同的控制器来控制模式表单和登录页面表单，请使用

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

modalInstance.result。然后(函数(设置selectedItem){ $范围。选择=设置selectedItem;}，函数(){$log.info('Modal dismisat: ' + new Date();});

You can get all the data from modal form in selectedItem and use this in landing page form. Also, how do you open the modal. If it is through a button, bind that ng-model to open modal using $modal.open.Don't create separate controller for your modal.Use the same one as your landing page. This way you can use 1 controller to open modal as well as other function after the modal is closed.

您可以从selectedItem的模态表单中获取所有数据，并在着陆页表单中使用这些数据。还有，如何打开模态。如果是通过按钮，则使用$modal.open将ng-model绑定到open modal。不要为你的模式创建单独的控制器。使用与你的着陆页相同的页面。这样，你可以使用一个控制器打开模态和其他功能后，模态关闭。

PS: Code snippet given here is from angular ui's page. Check that page's documentation for selectedItem

这里给出的代码片段来自于角ui的页面。查看该页面的selectedItem文档。

#1