// The Javascript code:
$scope.addLeg = function() {
$scope.sidebar = true;
$scope.sidebar_template = '/partials/legs/add_leg.html';
}
// Simplified example of HTML:
<html>
<div ng-app="MyApp" ng-controller="MainCtrl">
<a ng-click="addLeg()">Add Leg</a>
<a ng-click="addRoute()">Add Route</a>
<a ng-click="editLeg()">Edit Leg</a>
<a ng-click="editRoute()">Edit Route</a>
...
<div id="sidebar" ng-class="{'sidebar-hidden': sidebar == false}">
<div ng-include src="sidebar_template"></div>
</div>
<google-map></google-map>
</div>
这一切都很好，很好，按照需要工作，但在目前我的应用程序只使用一个控制器(MainCtrl在js / controllers.js)，它开始变得很杂乱。我现在有很多方法，因为应用程序功能正在扩大。我想把我的控制器分成多个控制器，同时保留这个侧边栏功能。
我想有MainCtrl作为主控制器，控制侧边栏模板的加载(通过更改sidebar_template变量指向文件目标)，我想要它控制一些全局地图相关的方法(如抓取郊区名称坐标等)。
我试图拆分它这样：
controllers/js/main.js - MainCtrl controllers/js/legs.js - LegCtrl controllers/js/routes.js - RouteCtrl
我想让LegCtrl和RouteCtrl继承MainCtrl，所以我可以访问它的范围和方法，这是很好。但现在的问题是如何动态加载控制器到边栏div基于什么功能是必需的。最初我所有的方法都在MainCtrl，这是在包装div包围边栏div(见上面再次举一个例子)，所以这不是一个问题。
例如，说我按“添加腿”按钮，它需要调用addLeg在LegCtrl，但LegCtrl不加载在应用程序，所以它没有访问该方法。我可以保持addLeg()在MainCtrl内，并改变sidebar_template变量加载模板，但模板中没有什么工作，因为它是从内部调用方法的LegCtrl现在。
我需要以某种方式动态加载控制器在边栏的ng-include div，这样的东西可能：
// MainCtrl
$scope.addLeg = function() {
$scope.required_controller = LegCtrl;
$scope.sidebar = true;
$scope.sidebar_template = '/partials/legs/add_leg.html';
LegCtrl.addLeg();
}
<div id="sidebar" ng-class="{'sidebar-hidden': sidebar == false}">
<div ng-include src="sidebar_template" ng-controller="{{required_controller}}"></div>
</div>
在上面的非工作示例中，您可以看到我想到的一个可能的解决方案，但我需要LegCtrlto是实际的控制器函数，而不是一个对象(ng-controller工作)。我还需要一些方法从MainCtrl.addLeg在LegCtrl上调用addLeg(也许使用广播？)。
如果任何人都可以指出我的方向是正确的，是伟大的。对不起，这个庞大的职位，它需要一点解释，使其一致。希望它有意义。谢谢。
更新：我想我已经找到一个解决方案使用服务作为导航控件(它将加载相关的模板和广播一个事件到新的控制器被动态加载，告诉它要执行什么函数)：
http://plnkr.co/edit/Tjyn1OiVvToNntPBoH58?p=preview
只是试图测试这个想法现在，但广播.on不工作。我认为这是因为广播在模板加载之前触发。如何解决这个问题？这是一个很好的解决方案，我在做什么？
从主控制器实现一些逻辑来显示模板
$scope.addLeg=function() {
$scope.showAddLeg=true;
}
AddLeg模板视图将加载控制器，因此提供一种机制实际添加新的腿。模板看起来像
<script type="text/ng-template" class="template" id="addLegTemplate">
<div ng-controller='LegsController'>
<!--html for adding a new leg-->
</div>
</script>
你可以使用ng-if ng-include将这个模板包含在你的主HTML中。
<div ng-if='showAddLeg'><div ng-include='addLegTemplate'/></div>
基本上你可以创建多个视图并绑定到同一个控制器(但实例会有所不同)。在这种情况下，LegsController可以绑定到多个视图，以支持完整的功能。
