angularjs单页面动态ng-include模块页面

angularjs单页面动态ng-include模块页面

需求描述

1、单页面,左侧类似树状导航,右侧是视图的布局; 2、点击左侧树功能节点,右侧切换显示对应功能页面;显示模式有两种,一种是替换展示,新点击的功能替换原来的功能页,展示最新点击的功能页;另一种是追加展示,左侧功能相当于多选,右侧视图展示选择的功能的所有页面,追加显示再最后;

实现

1、angularjs路由无法解决这个问题;使用ng-include页面,动态获取页面的路径,提前注入所有页面的controller。 2、一开始用了字符串拼接,然后$compile一下,使得子页面的controller的$scope作用域被修改,获取不到模型数据。需要注意的是controller的作用域就好了,采用以下方式解决。

<div class="form panel" id="main-view">
        <div ng-repeat="template in home.pageTemplates">
            <header class="page-header  margin-bottom-0 clearfix gray">
                <h4 class="panel-title" ng-cloak><span class="fa fa-bars margin-left-10 margin-right-5"></span>{{template.title}}</h4></header>
            <div ng-include="template.pageSrc"></div>
        </div>
    </div>

思路来自:http://stackoverflow.com/questions/17801988/dynamically-loading-controllers-and-ng-include


2016-8-31 09:51:42


欢迎前往原文讨论:https://github.com/giscafer/blog/issues/9

相关文章