如何将表单提交事件传播到自定义指令的父级？

我有一个简单的AngularJS项目，用户输入数据后，我会根据这些数据生成一个图表。我正在尝试找出如何组织代码，使其符合MVC设计模式。特别是，我在弄清楚如何将表单的提交事件传播到自定义指令的父级时遇到了问题。我正在寻找某种回调机制。

看起来有几种选择，但我还没有让它们中的任何一种工作。我考虑使用自定义指令、ui-Router和服务（如AngularJS：如何在控制器之间传递变量？）。

到目前为止，我一直在尝试使自定义指令的方法起作用。我有一个自定义指令，它是一个表单，当提交时应该将其输入传递给另一个自定义指令。我有三个控制器：一个用于主应用程序的NavigationController，一个用于输入的InputController，它与指令绑定，一个用于输出的OutputController，它与指令绑定。

我认为NavigationController应该知道如何从InputController中提取输入数据并将其传递给OutputController。而InputController和OutputController应该保持不可知，以便可以重用它们。

我猜我已经弄清楚了除了流程控制以外的一切。输入表单包含

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

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

};

}]);

})();