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
26
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
6
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
0
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
26
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
6
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
0
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文档。