如何使用模态和非模态形式角UI引导相同的控制器？ [英] How to use the same controller for modal and non-modal form in Angular UI Bootstrap?

问题描述

我有一个登记表模式。同样的形式应该在登陆页面的底部不是一个模式显示。

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.

目前我的控制器，它处理的注册模式采用 $ modalInstance 为沿 $范围等。如果参数之一我想补充 NG-控制器=SignUpCtrl在登陆页面的元素，这是行不通的，因为控制器不是通过创建$ modal.open 法等角度抱怨未知提供商：$ modalInstanceProvider＆LT; - $ modalInstance

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.

我有一个服务注册用户（ authService.signUp（数据）。然后/ catch语句...），但控制器本身确实有点多 - 处理输入，发出事件（例如与翻译的错误消息），设置饼干等。

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.

什么是处理这种情况，而无需复制整个差不多控制器code的最好方法？我应该摆脱控制器code到另一个更高层次的服务？

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?

推荐答案

挣扎了很长一段时间我发现了一个更容易把戏再使用我们的控制器两种模式和正常情况下后。

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

我发现，我们可以通过调用者的范围，模态控制器，所以我推到modalInstance的范围，给了模态控制器。
现在，你不必未知供应商的问题，因为$范围是众所周知的。

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

下面的例子：

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

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

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

干杯！

这篇关于如何使用模态和非模态形式角UI引导相同的控制器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！