¿Cómo propagar el evento de envío de formulario al padre de la directiva personalizada?
Tengo un proyecto simple de AngularJS donde tomo datos de entrada del usuario y produzco un gráfico basado en esos datos. Estoy tratando de descubrir cómo organizar el código para que se ajuste alPatrón de diseño MVC. En particular, estoy atrapado descubriendo cómo propagar el evento de envío de un formulario al padre de la directiva personalizada. Estoy buscando algún tipo de mecanismo de devolución de llamada.
Parece que hay varias opciones, pero todavía no he conseguido ninguna de ellas. He considerado usardirectivas personalizadas, ui-Routery servicios (segúnAngularJS: ¿Cómo puedo pasar variables entre controladores?)
Hasta ahora he estado tratando de hacer que el enfoque de las directivas personalizadas funcione. Tengo una directiva personalizada<input-form> ese es un formulario que cuando se envía debe pasar su entrada a otra directiva personalizada,<index-chart>. Tengo tres controladores: uno para la aplicación principal,NavigationController, uno para entradaInputController eso está ligado a la directiva<input-form>y uno para salidaOutputController eso está atado a la<index-chart> directiva.
Pienso que elNavigationController debe saber cómo extraer los datos de entrada delInputController y pasarlo alOutputController. Y elInputController yOutputController debe permanecer agnóstico para que puedan reutilizarse.
Supongo que he descubierto todo excepto el control de flujo. los<input-form> contiene el<form ... ng-submit, por lo tanto, aunque quiero que siga siendo agnóstico, es responsable de activar la acción que responde a la entrada que envía el usuario. Sin embargo, el código para esa acción debería estar enOutputController cualInputController No debería saberlo.
Como puedo hacerNavigationController responder al evento de envío contenido en la directiva personalizada<input-form> cuyo controlador esInputController? ¿Y cómo puede elNavigationController luego extraer datos de la instancia de laInputController e invocar el código contenido enOutputController eso debería representar el gráfico (es decirrenderChart() en el código de abajo)?
El siguiente código también está en Plunker:http://plnkr.co/edit/wm4suXMcSUE6obYFk3hp?p=preview index.html
<html ng-app="a3d">
<div ng-controller="NavigationController as navCtrl">
<input-form ng-show="navCtrl.shouldShowInputForm()"></input-form>
<index-chart ng-show="navCtrl.shouldShowOutputChart()"></index-chart>
</div>
</html>
a3j.js
(function(){
var app = angular.module('a3d', ['input-form', 'index-chart']);
app.controller('NavigationController', function(){
this.inputMode = true;
this.shouldShowInputForm = function(){
return this.inputMode;
};
this.shouldShowOutputChart = function(){
return !this.inputMode;
};
this.flipMode = function(){
this.inputMode = !this.inputMode;
}
});
})();
input-form.html
<form name="inputForm" ng-controller="InputController as inputCtrl"
ng-submit="inputForm.$valid && ???" novalidate>
<textarea name="topic1Data" ng-model="inputCtrl.inputValues.topic1Data" rows="10" cols="30" required></textarea>
<button type="submit" class="btn btn-info btn-lg" ng-disabled="!inputForm.$valid">Compare</button>
</form>
inputForm.js
(function(){
var app = angular.module('input-form', [ ]);
app.directive('inputForm', function(){
return {
restrict: 'E',
templateUrl: 'input-form.html',
};
});
app.controller('InputController', ['$window', '$log', function($window, $log, appData){
// ...
}]);
index-chart.html
<!-- I haven't really gotten to this part yet -->
<div id="indexchart" style="min-width: 310px; max-width: 800px; height: 900px; margin: 0 auto"></div>
indexChart.js
(function(){
var app = angular.module('index-chart', [ ]);
app.directive('indexChart', function(){
return {
restrict: 'E',
templateUrl: 'index-chart.html'
};
});
app.controller('OutputController', ['$window', '$log', function($window, $log, appData){
this.renderChart = function(){
// This is where the chart should get rendered
};
}]);
})();