angularjs - reactivos - tablas angular 4

¿Cómo usar el mismo controlador para la forma modal y no modal en Angular UI Bootstrap?

Question

Tengo un modal con un formulario de registro. El mismo formulario debe mostrarse en la parte inferior de la página de destino, no en un modo

Actualmente mi controlador que maneja el registro modal toma $modalInstance como uno de sus parámetros en $scope etc. Si agrego ng-controller="SignUpCtrl" a un elemento en la página de destino, no funciona, porque el controlador no estaba creado a través del método $modal.open , por lo que Angular se queja del Unknown provider: $modalInstanceProvider <- $modalInstance .

Tengo un servicio para registrar usuarios ( authService.signUp(data).then/catch...) , pero el controlador hace un poco más: maneja la entrada, emite eventos (por ejemplo, con mensajes de error traducidos), configura cookies, etc. .

¿Cuál es la mejor manera de manejar este caso sin duplicar casi todo el código del controlador? ¿Debo mover el código del controlador a otro servicio de nivel superior?

Answer 1

Después de luchar durante mucho tiempo, encontré un truco más fácil para reutilizar nuestro controlador tanto para el caso modal como para el normal.

Descubrí que podemos pasar el alcance de la persona que llama al controlador modal, así que introduje modalInstance en $ scope y se lo pasé al controlador modal. Ahora no tiene un problema de proveedor desconocido porque $ scope es un problema conocido.

A continuación se muestra un ejemplo:

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

¡Aclamaciones!

Answer 2

Si desea utilizar el mismo controlador tanto para la forma modal como para la página de destino, utilice

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

Puede obtener todos los datos del formulario modal en selectedItem y utilizarlo en el formulario de la página de destino. Además, ¿cómo abres el modal? Si es a través de un botón, enlace ese modelo ng para abrir modal usando $modal.open No cree un controlador separado para su modal.Utilice el mismo que su página de destino. De esta manera, puede usar 1 controlador para abrir la función modal y otras funciones después de que se cierre la modalidad.

PD: el fragmento de código que se da aquí es de la página de ui angular . Verifique la documentación de esa página para el artículo selectedItem

Answer 3

Si está utilizando ui-router, puede usar fácilmente la resolución de ui-router para proporcionar $ uibModalInstance (antes $ 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.
    }
})

De esa manera puedes usar tu controlador modal como un controlador normal. Si inyecta $ uibModalInstance en su controlador será nulo.