大佬教程收集整理的这篇文章主要介绍了angularjs – 动态加载控制器和ng-include，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
// 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，@R_699_9447@访问它的范围和方法，这是很好。但现在的问题是如何动态加载控制器到边栏div基于什么功能是必需的。最初我所有的方法都在MainCtrl，这是在包装div包围边栏div(见上面再次举一个例子)，所以这不是一个问题。
例如，说我按“添加腿”按钮，它需要@L_197_25@addLeg在LegCtrl，但LegCtrl不加载在应用程序，所以它没有访问该方法。我可以保持addLeg()在MainCtrl内，并改变sidebar_template变量加载模板，但模板中没有什么工作，因为它是从内部@L_197_25@方法的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上@L_197_25@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可以绑定到多个视图，以支持完整的功能。
以上是大佬教程为你收集整理的angularjs – 动态加载控制器和ng-include全部内容，希望文章能够帮你解决angularjs – 动态加载控制器和ng-include所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。