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. CEF禁止右键菜单

    转载:http://www.cctry.com/thread-258549-1-1.html 转载:http://blog.sina.com.cn/s/blog_dad2c54101019cmo.ht ...

  2. s3c2440中U-boot移植时执行cp.b提示:Flash not Erased【转】

    本文转载自:https://blog.csdn.net/baiyang139/article/details/79054415 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  3. The P4 Language Specification v1.0.2 Introduction部分

    Introduction P4 is a declarative language for expressing how packets are processed by the pipeline o ...

  4. FW: How to use Hibernate Lazy Fetch and Eager Fetch Type – Spring Boot + MySQL

    原帖 https://grokonez.com/hibernate/use-hibernate-lazy-fetch-eager-fetch-type-spring-boot-mysql In the ...

  5. shell 判断文件是否是可执行文件

    测试变量指定的文件是否存在且是可执行文件.如果存在且是可执行文件,则执行该文件,否则通过chmod命令赋予该文件可执行权限. //test.sh #!/bin/bash echo "ente ...

  6. Rails 5 Test Prescriptions 第10章 Unit_Testing JavaScript(新工具,learn曲线太陡峭,pass)

    对Js的单元测试是一个大的题目.作者认为Ruby的相关测试工具比Js的测试工具更灵活 大多数Js代码最终是关于响应用户的行为和改变DOM中的元素 没有什么javascript的知识点.前两节用了几个新 ...

  7. Android之第三方平台实现QQ登录和QQ分享

    目前大多数APP都包含了第三方平台的登录,特别是QQ和微信,这篇博客主要讲的是如何实现QQ第三方平台实现QQ登录和分享功能,功能包含: 登录授权登录获取用户信息(昵称,头像,地址等) QQ分享给好友 ...

  8. SGU 219 Synchrograph tarjian找环,理解题意,图论 难度:3

    http://acm.sgu.ru/problem.php?contest=0&problem=219 题目大意: 如果指向某个点的边权全都为正数,那么这个点就是可点燃的,点燃操作把入弧权值- ...

  9. javascript浅拷贝和深拷贝

    /* 浅拷贝 */ function extend(parent, child) { var i; child = child || {}; for (i in parent) { if (paren ...

  10. 解决MySQL workbench的Can't connect to MySQL server on '127.0.0.1'(10061)问题

    如题,今天打开MySQL时,出现了这种问题,无法连接到数据库 问题原因:The error (2003) Can't connect to MySQL server on 'server' (1006 ...