Как использовать тот же контроллер для модальной и немодальной формы в Angular UI Bootstrap?

У меня модальный с регистрационной формой. Такая же форма должна отображаться в нижней части целевой страницы не в модальном режиме.

В настоящее время мой контроллер, который обрабатывает модальность регистрации, принимает $modalInstance как один из его параметров вдоль $scope и т.д. Если я добавлю ng-controller="SignUpCtrl" к элементу целевой страницы, это не сработает, потому что контроллер wasn ' t, созданный с помощью метода $modal.open, и поэтому Angular жалуется на Unknown provider: $modalInstanceProvider <- $modalInstance.

У меня есть служба для регистрации пользователей (authService.signUp(data).then/catch...), но сам контроллер делает немного больше - обрабатывает ввод, испускает события (например, с переводом сообщений об ошибках), устанавливает файлы cookie и т.д.

Какой лучший способ справиться с таким случаем, не дублируя почти весь код контроллера? Должен ли я переместить код из контроллера в еще одну службу более высокого уровня?

Ответ 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);
};

Ура!

Ответ 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 в свой контроллер, он будет равен нулю.

Ответ 3

Если вы хотите использовать тот же контроллер как для модальной формы, так и для формы целевой страницы, используйте

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

Вы можете получить все данные из модальной формы в selectedItem и использовать их в форме целевой страницы. Кроме того, как вы открываете модальный. Если это через кнопку, свяжите эту ng-модель, чтобы открыть модальную версию с помощью $modal.open. Не создавайте отдельный контроллер для вашего модального. Используйте ту же самую, что и целевая страница. Таким образом, вы можете использовать 1 контроллер для открытия модальной, а также другой функции после закрытия модальности.

PS: Ниже приведен фрагмент кода из angular ui page. Проверьте документацию на странице selectedItem