程序员经验分享-hwhale

动态加载控制器和 ng-include

2024-01-10

目前我有一个有侧边栏的应用程序，侧边栏使用以下方式加载不同的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 in js/controllers.js）并且它开始变得非常混乱。我现在有很多方法，因为应用程序的功能正在扩展。我想将我的控制器分成多个控制器，同时保留此侧边栏功能。

我希望有MainCtrl作为控制侧边栏模板加载的主控制器（通过更改sidebar_template指向文件目的​​地的变量），我希望它控制一些与全局地图相关的方法（例如从坐标中获取郊区名称等）。

我尝试像这样分割它：

controllers/js/main.js - MainCtrl
controllers/js/legs.js - LegCtrl
controllers/js/routes.js - RouteCtrl

我想要LegCtrl and RouteCtrl来继承MainCtrl所以我可以访问它的范围和方法，这很好。但现在的问题是如何根据需要的功能将控制器动态加载到侧边栏 div 上。本来我所有的方法都在MainCtrl，它位于侧边栏 div 周围的包装器 div 上（再次参见上面的示例），所以这不是问题。

例如，假设我按下“添加航段”按钮，则需要调用addLeg in LegCtrl, but LegCtrl未加载到应用程序上，因此它无权访问该方法。我可以保留addLeg()在 - 的里面MainCtrl，并让它改变sidebar_template变量来加载模板，但模板中的任何内容都不起作用，因为它是从内部调用方法LegCtrl now.

我需要以某种方式动态加载侧边栏上的控制器ng-includediv，可能是这样的：

// 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-controller上班）。我还需要某种方式来打电话addLeg on the LegCtrl来自MainCtrl.addLeg（也许使用广播？）。

如果有人能指出我正确的方向，那就太好了。抱歉，这篇文章很长，需要一些解释才能使其连贯。希望这是有道理的。谢谢。

Update:我想我已经找到了一个使用服务充当导航控件的解决方案（它将加载相关模板并向动态加载的新控制器广播一个事件，以告诉它要执行什么函数）：

http://plnkr.co/edit/Tjyn1OiVvToNntPBoH58?p=preview 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可以绑定到多个视图以支持完整的功能。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angularJS

动态加载控制器和 ng-include 的相关文章