angularjs – 动态加载控制器和ng-include

前端之家收集整理的这篇文章主要介绍了angularjs – 动态加载控制器和ng-include前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
目前我有一个应用程序有一个侧边栏侧边栏加载不同的html模板使用ng-include基于用户选择做什么操作。它是一个地图相关的应用程序,所以例如,如果用户选择“添加腿”按钮,它将加载add_leg.html模板到侧边栏使用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,所以我可以访问它的范围和方法,这是很好。但现在的问题是如何动态加载控制器到边栏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可以绑定到多个视图,以支持完整的功能

原文链接:https://www.f2er.com/angularjs/145549.html

猜你在找的Angularjs相关文章