angularJS提供了自定义指令的功能,指令可以定义自己的模板控制器,这个就类似于现在框架的组件,一个指令一般对应一个模板,

   templateUrl: 'templates/exportTmp.html', 
template:'<div>............</div>'

但有时候我们想动态改变加载的指令模板

1)合理使用ng-include

html:

<div ng-switch="myVar">
<div ng-switch-when="action">
<div ng-include="getTemplate('action')"></div>  
</div>
<div ng-switch-when="view">
<div ng-include="getTemplate('view')"></div>
</div>
<div ng-switch-when="edit">
<div ng-include="getTemplate('edit')"></div>
</div>
<div ng-switch-default>
<div ng-include="getTemplate('action')"></div>
</div>
</div>

js:

   link: function ($scope, el, attr) {
 $scope.getTemplate = function(flag) {
if(flag=='action') {
  template='./src/html/action.html';
 }
 .....
 return template;
 }  
}

  

  

angularJS指令动态加载template的更多相关文章

  1. angularJS ng-repeat中的directive 动态加载template

    有个需求,想实现一个html组件,传入不同的typeId,渲染出不同的表单元素. <div ng-repeat="field in vm.data"> <magi ...

  2. angularjs 动态加载指令------编译服务$compile

    场景: 我们写了一个自定义的指令,这条指令需要一些数据,而这些数据需要在某些操作之后才能就绪,这时候,我们就需要在数据就绪之后,动态加载指令. 示例: js: $scope.$watch('repor ...

  3. [AngularJS] 使用AngularCSS动态加载CSS

    [AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...

  4. [AngularJS] 使用AngularAMD动态加载Controller

    [AngularJS] 使用AngularAMD动态加载Controller 前言 使用AngularJS来开发Single Page Application(SPA)的时候,可以选用AngularU ...

  5. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  6. [AngularJS] 使用AngularAMD动态加载Service

    [AngularJS] 使用AngularAMD动态加载Service 前言 「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Contro ...

  7. 黄聪:AngularJS 动态加载控制器实例-ocLoazLazy

    一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...

  8. AngularJS+RequireJs实现动态加载JS和页面的方案研究【中】

    3.动态加载的内容: home.js [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.co ...

  9. AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】

    1.入口页面 存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp [html] view plain copy 在CODE上查看代码片派生到 ...

随机推荐

  1. Linux笔记 #05# 断开远程连接后保持程序运行

    教程:Linux 技巧:让进程在后台可靠运行的几种方法 网上搜索了一下,方法很多,选用最流行的 screen 命令参考:http://man.linuxde.net/screen 1. 安装 root ...

  2. pyDay10

    内容来自廖雪峰的官方网站. 1.python的赋值语句:a, b, c = x, y, z 相当于 a = x, b = y, c = z.(事实上等式右边是一个tuple) 2.获得genarato ...

  3. 20162314 《Program Design & Data Structures》Learning Summary Of The Eleventh Week

    20162314 2017-2018-1 <Program Design & Data Structures>Learning Summary Of The Eleventh We ...

  4. Cooperation.GTST团队第四周项目总结

    项目进展 这周我们的主要学习内容是: 1.研究学习如何导入博客详情页. 2.继续研究如何使用博客园的相关接口,导入相关jar包实现页面整体效果: 在我们使用其它APP或者上网浏览论坛.网页等时,通常都 ...

  5. phantomjs学习资料

    http://blog.csdn.net/mecho/article/details/45888465 phantomjs的使用说明,尤其是webpage创建,资源加载前后的处理方法.

  6. cocos2d-js入门二 环境搭建二

    电脑升级到WIN10后,cocos  code IDE安装不成功. 于是搭建新的环境JetBrainsWebStorm+chrome+JetBrains IDE Support,其中JetBrains ...

  7. 使用ARouter遇到的坑

    跨模块跳转不能跳转 需要被跳转的模块或者说使用了ARouter注解的模块都要加上这个 dependencies{    annotationProcessor rootProject.ext.arou ...

  8. 雷林鹏分享:Ruby 日期 & 时间(Date & Time)

    Ruby 日期 & 时间(Date & Time) Time 类在 Ruby 中用于表示日期和时间.它是基于操作系统提供的系统日期和时间之上.该类可能无法表示 1970 年之前或者 2 ...

  9. Docker环境准备-安装Ubuntu

      ***微信扫一扫,关注“python测试开发圈”,了解更多测试教程!***

  10. echarts入门1【柱状图/饼图】

    这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录 ...