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. Vue学习笔记之vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  2. InstallShield的工程类型的选择

    转载:http://blog.csdn.net/wuxiaoqrs/article/details/45717695 InstallScript vs. Basic MSI InstallScript ...

  3. Ant Design of Angular

    1.按照官方的方法,报了这个 node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.node_modules ...

  4. js 获取地址栏域名以及URL

    console.log(window.location.host) console.log(document.domain) console.log(window.location.href) con ...

  5. Decorator(装饰)

    意图: 动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator 模式相比生成子类更为灵活. 适用性: 在不影响其他对象的情况下,以动态.透明的方式给单个对象添加职责. 处理那些可以撤消 ...

  6. IntelliJ IDEA自定义类和方法注解模板

    现在Java开发主流工具应该是Intelij Idea 方便快捷. 本文将主要介绍如何用Intelij Idea配置类及方法的注释模板提高代码注释效率 1. 配置类注解模板 找到配置页面 File - ...

  7. python 正则表达式详解

    正则表达式是一个很强大的字符串处理工具,几乎任何关于字符串的操作都可以使用正则表达式来完成,作为一个爬虫工作者,每天和字符串打交道,正则表达式更是不可或缺的技能,正则表达式的在不同的语言中使用方式可能 ...

  8. bzoj2733: [HNOI2012]永无乡 线段树合并

    永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以从一个岛 到达另一个岛. ...

  9. java反射教程

    什么是反射,为什么它是有用的,以及如何使用它? 1.什么是反射? “反射通常是JVM中运行的程序需要检测和修改运行时程序的行为的一种能力.”这个概念通常与内省(Introspection)混淆.以下是 ...

  10. UVA-12166 Equilibrium Mobile(二叉树)

    题目大意:改变二叉树上的权值,使树平衡,问最少该几个值. 题目分析:不会做,查的题解.有条奇妙的性质:如果将第d层权值为w的节点为基准做改动,则整棵树的总重量为w<<d,即w*2^d.仔细 ...