个人中心
gpt4 book ai didi

angularjs - 动态加载 Controller 和 ng-include

转载 作者：行者123 更新时间：2023-12-02 22:28:13 26 4
gpt4 key购买 nike

目前我有一个带有侧边栏的应用程序，侧边栏使用 ng-include 加载不同的 html 模板。基于用户选择执行的操作。这是一个与 map 相关的应用程序，例如，如果用户选择“添加腿”按钮，它将加载 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>

这一切都很好，并且可以按预期工作，但目前我的应用程序仅使用一个 Controller ( MainCtrl 中的 js/controllers.js )，并且它开始变得非常困惑。我现在有了很多方法，因为应用程序的功能正在扩展。我想将我的 Controller 分成多个 Controller ，同时保留此侧边栏功能。

我想要MainCtrl作为控制侧边栏模板加载的主 Controller (通过更改指向文件目标的 sidebar_template 变量)，我希望它控制一些与全局 map 相关的方法(例如从坐标获取郊区名称等) )。

我尝试像这样分割它:

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

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

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

我需要以某种方式动态加载侧边栏上的 Controller 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>

在上面的非工作示例中，您可以看到我想到的可能的解决方案，但我需要 LegCtrl成为实际的 Controller 功能，而不是对象(为了 ng-controller 工作)。我还需要某种方式调用 addLeg关于LegCtrl来自MainCtrl.addLeg (也许使用广播？)。

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

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

http://plnkr.co/edit/Tjyn1OiVvToNntPBoH58?p=preview

现在只是想测试这个想法，但是广播 .on不起作用。我认为这是因为广播在模板加载之前触发。我怎样才能解决这个问题？对于我正在做的事情来说，这是一个好的解决方案吗？

最佳答案

如果我正确理解了你的意思，你可以尝试创建一个模板 View 专门用于创建一条新腿。

从主 Controller 实现一些逻辑来显示模板

$scope.addLeg=function() {
   $scope.showAddLeg=true;
}

AddLeg 模板 View 将加载 Controller ，从而提供一种实际添加新腿的机制。模板看起来像

<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>

基本上，您可以创建多个 View 并绑定(bind)到同一个 Controller (但实例会有所不同)。在这种情况下，LegsController 可以绑定(bind)到多个 View 以支持完整的功能。

关于angularjs - 动态加载 Controller 和 ng-include，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17801988/

26 4 0
文章推荐： AngularJS - 为什么需要 $apply 来正确解决 $q promise ？
文章推荐： elasticsearch - 用于多个存储桶的 Couchbase/Elasticsearch 连接器
文章推荐： elasticsearch - Couchbase Elasticsearch Connector保存检查点相同的存储桶
文章推荐： windows-7 - Windows 7 将保存到 Program Files 的文件放在哪里
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com