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. 20145211《网络对抗》逆向及BOF基础实践

    逆向及BOF基础实践——又是一年梅落时 一.实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. ...

  2. apm的学习资料

    百度搜索    apm博客园 实现自己的APM http://www.cnblogs.com/Kevin-moon/archive/2009/02/23/1395039.html 异步机制,一共5篇文 ...

  3. ubuntu 10.04 安装arm交叉编译器

    家里有一台cotext-A9(armv7-a) 的盒子,现在不用了, 一直想着废物利用.于是想怎么为这盒子编译程序. 目标机器: root@routon-h1:/# uname -a Linux ro ...

  4. 如何获取Android应用的packageName和ActivityName,识别应用中的控件

    1.获取Android应用的packageName和ActivityName A:adb logcat >log.txt 在log中搜索package B:adb shell  logcat | ...

  5. jstack工具介绍

    一.使用场景 当一个java应用CPU的使用比较高或者到达100%以上的时候,需要分析代码哪里有问题.这时候可以使用jstack命令 二.怎么使用 先使用命令ps –ef |grep keyword ...

  6. ArcGIS 10 Raster Calculator 在哪儿

    ArcGIS 10 Raster Calculator 在哪儿? 现在大家用的最多的是ArcGIS9.3,所以大家都知道Raster Calculator在ArcToolbox->Spatial ...

  7. 常用flash参数设置

    <object type="application/x-shockwave-flash" data="vcastr3.swf" width="6 ...

  8. activity+fragment+listview+adapter+bean在同一个类中的套路

    1.xml activity_main.xml <?xml version="1.0" encoding="utf-8"?><FrameLay ...

  9. js 判断一个对象是否为空

    由于对于一个空对象{},其boolean值也是真,所以不能简单的用boolean来判断: jQuery的源码里有一个判断空对象的方法 function isEmptyObject(a) { var b ...

  10. 前端常用框架和js插件 UI组件等

    前言:写这个随笔,是记录一下工作以来用到的各种框架.以免日后忘记: JS库: 1. jquery.js 2. zepto.js ----jquery的精简版,专门用于手机上的,但是zepto主体默认是 ...