动态加载控制器和NG-包括 [英] Dynamically Loading Controllers and ng-include
问题描述
目前，我有一个具有一个侧边栏应用程序，并使用工具条加载不同的HTML模板 NG-包括根据用户选择做什么操作。这是一个与地图相关的应用程序，因此，例如，如果用户选择添加腿'按钮，它会使用加载 add_leg.html 模板放到侧边栏 NG-包括：
At the moment I have an app that has a sidebar, and the sidebar loads different html templates using ng-include based on what operation the user chooses to do. It's a map related app, so for example, if the user selects the 'Add Leg' button it will load the add_leg.html template into the sidebar using 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>
这是一切都很好和作品的需要，但此刻我的应用程序只能在 JS /控制器使用一个控制器（），它开始变得真正混乱。我因为应用程序的功能正在不断扩大得到了很多的方法了。我想起来我分裂成控制器多个控制器，同时保留了这个侧边栏功能。 MainCtrl .js文件
This is all well and good and works as desired, but at the moment my app is only using one controller (MainCtrl in js/controllers.js) and it's starting to get really cluttered. I've got a lot of methods now because the apps functionality is expanding. I'd like to split my controller up into multiple controllers whilst retaining this sidebar functionality.
我想有 MainCtrl 作为控制侧边栏模板的加载（通过改变主控制器 sidebar_template 变量指向文件目的地），我想它来控制一些全球地图相关的方法（如从获取的坐标郊区的名字，等等）。
I want to have MainCtrl as the main controller that controls the loading of the sidebar template (by changing the sidebar_template variable that points to the file destination), and I want it to control some of the global map related methods (like fetching suburb names from coordinates, etc).
我试着像这样分割：
controllers/js/main.js - MainCtrl
controllers/js/legs.js - LegCtrl
controllers/js/routes.js - RouteCtrl
我要的 LegCtrl 和 RouteCtrl 继承 MainCtrl 这样我就可以访问它的范围和方法，这一切都很好。但现在的问题是如何动态控制器加载到基于需要什么功能的侧边栏股利。本来我所有的方法是在 MainCtrl ，这是对周围的边栏格（上面再次看到了一个例子）包装的div，所以它不是一个问题。
I want the LegCtrl and RouteCtrl to inherit the MainCtrl so I can access its scope and methods, that's all fine. But now the problem is how do I dynamically load the controller onto the sidebar div based on what functionality is required. Originally all of my methods were in MainCtrl, and that's on the wrapper div that surrounds the sidebar div (see above again for an example), so it wasn't a problem.
举例来说，假设我preSS添加腿按钮，这将需要在 LegCtrl addLeg C $ C>，但 LegCtrl 未加载上的应用程序，因此它不能访问的方法。我可以保持 addLeg（）中的 MainCtrl ，并将其修改 sidebar_template 变量来加载模板，但没有在模板会工作，因为它是从调用方法里面的 LegCtrl 了。
For example, say I press the 'Add Leg' button, it's going to need to call addLeg in LegCtrl, but LegCtrl isn't loaded on the app, so it doesn't have access to the method. I could keep addLeg() inside the MainCtrl, and have it change the sidebar_template variable to load the template, but nothing in the template will work because it is calling methods from inside the LegCtrl now.
我需要以某种方式动态地加载侧边栏上的 NG-包括 DIV控制器，喜欢的事，这也许：
I need to somehow dynamically load the controller on the sidebar's ng-include div, something like this perhaps:
// 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>
在非工作上面的例子可以看到一个可能的解决方案，我想到了，但我需要 LegCtrl 是实际控制功能，而不是一个对象（为 NG-控制器工作）。我还需要一些方法来调用 addLeg 在 LegCtrl 从 MainCtrl.addLeg （可能使用广播？）。
In the non-working example above you can see a possible solution I've thought of, but I need LegCtrlto be the actual controller function, not an object (for ng-controller to work). I also need some way to call addLeg on the LegCtrl from the MainCtrl.addLeg (perhaps using broadcast?).
如果任何人都可以在正确的方向指向我，会是巨大的。很抱歉的巨大后，它需要一点解释，使之条理。希望这是有道理的。谢谢你。
If anyone can point me in the right direction that'd be great. Sorry for the huge post, it needed a bit of explaining to make it coherent. Hopefully it makes sense. Thanks.
更新：我想我已经找到使用服务来充当导航控件（它会加载相关的模板和广播事件到新控制器的解决方案被动态加载来告诉它要执行的功能）：
Update: I think I've found a solution using a service to act as the navigation control (it will load the relevant templates and broadcast an event to the new controller being dynamically loaded to tell it what function to execute):
<一个href=\"http://plnkr.co/edit/Tjyn1OiVvToNntPBoH58?p=$p$pview\">http://plnkr.co/edit/Tjyn1OiVvToNntPBoH58?p=$p$pview
只是想出来，现在来测试这个想法，但广播。对不起作用。我认为这是因为模板加载之前播出的火灾。我该如何解决这个问题？这是我在做什么好的解决办法？
Just trying to test this idea out now, but the broadcast .on doesn't work. I think it's because the broadcast fires before the template loads. How can I fix this? Is this a good solution for what I'm doing?
推荐答案
如果我理解正确的，你有什么你可以尝试将专门创建一个模板视图中创建一个新的腿。
If i have understood you correctly what you can try would be to create a template view specifically to create a new leg.
从主控制器实现一些逻辑展现模板
From the main controller implement some logic to show the template
$scope.addLeg=function() {
$scope.showAddLeg=true;
}
的AddLeg模板视图将加载控制器并因此提供了一种机制，以实际添加新腿。模板看起来像
The AddLeg template view would load the controller and hence provide a mechanism to actually add new leg. The template would look like
<script type="text/ng-template" class="template" id="addLegTemplate">
<div ng-controller='LegsController'>
<!--html for adding a new leg-->
</div>
</script>
您可以使用包括主HTML中这个模板NG-IF + NG-包括
You can include this template inside you main html using ng-if + ng-include.
<div ng-if='showAddLeg'><div ng-include='addLegTemplate'/></div>
基本上，你可以创建多个视图，并绑定到同一个控制器（例如，但会有所不同）。在这种情况下， LegsController 可以绑定到多个视图，支持完整的功能。
Basically you can create multiple view and bind to same controller (but instance would differ). In this case the LegsController can be binded to multiple views to support the complete functionality.
这篇关于动态加载控制器和NG-包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
