angularjs - inside - directiva ng controller

Violación de MVC en el marco Iónico(angular) con $ ionicModal

Question

Al trabajar con $ionicModal en Ionic Framework, noté que mucha gente instanciaba el Modal dentro del controlador y pasaba el alcance del controlador al Modal. Al igual que,

 $ionicModal.fromTemplateUrl("views/call_options_view.html", function ($ionicModal) {
$scope.menu = $ionicModal;
}, {
scope: $scope,
animation: "slide-in-up"
});

Hacer esto permite que el modal invoque métodos en el alcance del controlador. ¿Hay alguna forma en que podamos dar un controlador por separado al Modal? En este momento, usando el alcance del controlador, ¿no hay una violación de MVC? El controlador posee dos vistas. Supongamos que quiero que el mismo modal esté disponible en otro controlador, entonces tendría que duplicar mi funcionalidad para el modal en ambos controladores. Se supone que MVC mejora la reutilización de código. Entonces, esencialmente, quiero volver a aplicar MVC dando a mi modal un controlador por separado.

Una forma en que pensé arreglar esto es poner el modal en el Root Controller. Si lo hace, lo hará accesible desde todos los controladores secundarios y la funcionalidad para el modal solo estará disponible en el controlador raíz. Todavía no me gusta esta solución, porque no quiero saturar mi controlador raíz con demasiada lógica.

¿Cualquier otra sugerencia?

Answer 1

Me tropecé con tu pregunta mientras intentaba encontrar una solución similar a tu preocupación.

Como tenía un problema de navegación en mis rutas, decidí usar $ionicModal para mostrar una vista de otro estado en una vista modal. Se me ocurrió una solución que diseñé allí (pero no la implementé para mi contexto de trabajo aún) que debería funcionar en mi caso, aunque no estoy realmente satisfecho con ella.

Para resumir, todos mis estados están anidados bajo tabs ; cuando estoy en el estado tabs.home , quiero mostrar directamente el estado tabs.settings.sub . Sin embargo, tabs.settings.sub basa en datos poblados por sus tabs.settings estado tabs.settings . De ahí mi problema con dar el alcance de mi estado actual ( tabs.home ) a tabs.settings.sub .

Mi modal utiliza una plantilla que incluirá la plantilla de mi vista:

<script id="templates/modal.html" type="text/ng-template">
<ion-modal-view>
<ng-include src="templateUrl" ng-controller="controller"></ng-include>
</ion-modal-view>
</script>

Entonces puedo reutilizar la vista desde el estado. En cuanto al alcance, utilicé $scope.new(true) para aislarlo y lo $scope.new(true) con los datos requeridos por mi plantilla modal:

var subState = $state.get (''tabs.settings.sub'');
var subScope = $scope.$new (true); // true: isolate
subScope.title = ''Sub'';
subScope.templateUrl = subState.templateUrl;
subScope.controller = function () {
if (subState.controller)
return $controller (subState.controller, {$scope:subScope});
return null;
};

El modal se instancia con este alcance (ese es un problema en mi opinión: mezclar el alcance del modal y el alcance del controlador). El controller debe ser una función que devuelva el controlador apropiado.

$ionicModal.fromTemplateUrl (''templates/modal.html'', {
scope: subScope
}).then (function (modal) {
modal.show ();
});

El principal problema con mi solución es transferir datos hasta el controlador de la vista para mostrar (en este caso SubCtrl ). Pero está más limitado a mi contexto específico: mi modal no tiene conocimiento de la cadena de herencia de los controladores y los estados, porque esto es manejado por el enrutador UI.

No sé si es posible acceder al estado asociado a un controlador (el patrón habitual parece ser $state.parent , pero esto no se puede usar aquí, como se menciona en la wiki del enrutador de UI ).

La solución alternativa que uso aquí (esta es la parte con la que no estoy satisfecho) es federar datos a través de los estados:

.state (''tabs.settings'', {
data: { status: ''valid'' }
}

Tengo acceso a ella cuando creo mi modal:

subScope.status = subState.data.status;

Y tengo acceso desde el controlador principal:

$scope.status = $state.current.data.status;